CSS: The inset CSS shorthand

Updated . Posted . Visible to the public. Repeats.

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.

Example

<div class="outer">
  <div class="inner">
    Some text
  </div>
</div>
.outer {
  background-color: cyan;
  position: relative;
  width: 500px;
  height: 500px;
}

Top, right, bottom and left

https://jsfiddle.net/jqx68wem/ Show archive.org snapshot

.inner {
  background-color: darkCyan;
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
}

Inset

https://jsfiddle.net/jqx68wem/1/ Show archive.org snapshot

.inner {
  background-color: darkCyan;
  position: absolute;
  inset: 10px;
}

Note you can use "auto". For example if you want to place something in the top right corner, you can use

.inner {
  inset: 0 0 auto auto;
}
Last edit
Michael Leimstädtner
License
Source code in this card is licensed under the MIT License.
Posted by Emanuel to makandra dev (2022-07-18 05:55)