CSS inset property

23. 02. 2023 -
A picture of a CSS

The CSS property inset is used to specify the position of an element’s box within its containing element, by specifying the distance of the box from the edges of the containing element.

The inset property accepts up to four values, which represent the distance of the box from the top, right, bottom, and left edges of the containing element, respectively. These values can be expressed as lengths, percentages, or the keyword auto.

Here is an example of how the inset property can be used to position an element:

div {
  position: absolute;
  inset: 20px 10px 30px 10px;

In this example, the div element is positioned absolutely within its containing element, and its box is positioned 20 pixels from the top, 10 pixels from the right, 30 pixels from the bottom, and 10 pixels from the left.

The inset property is a shorthand for the top, right, bottom, and left properties, and can be used as a more concise way of specifying the position of an element. It is supported in all modern web browsers.