What is inset in css

The inset CSS property is a shorthand that corresponds to the top, right, 
bottom, and/or left properties. It has the same multi-value syntax of the 
margin shorthand.

While part of the CSS Logical Properties specification, it does not define 
logical offsets. It defines physical offsets, regardless of the element's 
writing mode, directionality, and text orientation.

Css inset

/* this */
inset: 1px 2px 3px 4px;

/* is the same as this */
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;

Source: developer.mozilla.org

Inset css

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {

  position: relative;
  inset: 20px 50px 30px 10px;
  background-color: #c8c800;
}

Source: developer.mozilla.org

Inset css

div {
  background-color: yellow;
  width: 150px;
  height: 120px;
  position: relative;
}

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}

Source: developer.mozilla.org

Similar codes

0 vote321 views1 answer
Css outline shorthand
CSS
24 votes332 views5 answers
Placeholder css
CSS
1 vote330 views1 answer
How to add 2 text shadows
CSS
20 votes319 views2 answers
No select css
CSS
2 votes306 views1 answer
Make object not selectable javascript
CSS
1 vote310 views1 answer
Double color background css
CSS
6 votes322 views8 answers
Bootstrap css
CSS
3 votes304 views2 answers
Align an entire second row center css grid
CSS
0 vote317 views1 answer
Grid place between
CSS
7 votes301 views3 answers
Css wrap text to next line
CSS