CSS - Inset

Ethan D. -

Syntax and Values

The inset property in CSS follows a simple syntax, allowing you to set the inset values for an element. The general syntax for the inset property is as follows:

Example: General Syntax for inset Property

inset: <top> <right> <bottom> <left>;

You can specify one to four values, which represent the inset distances for the top, right, bottom, and left sides of the element. If you provide fewer than four values, the browser will infer the missing values based on the provided ones.

The inset property accepts several types of values:

Value Type Description Example
Length You can use length units such as pixels (px), ems (em), rems (rem), or any other valid CSS length unit to specify the inset distances. inset: 10px 20px 30px 40px;
Percentage You can use percentage values to set the inset distances relative to the size of the containing block. inset: 10% 20% 30% 40%;
Keyword auto: The browser will automatically calculate the inset value based on the available space.
inherit: The element will inherit the inset value from its parent element.		 inset: auto;
inset: inherit;

In addition to setting individual values for each side, you can also use the shorthand notation to set multiple values at once. The shorthand notation follows the same order as the individual properties: top, right, bottom, and left.

Examples of Shorthand Notation

/* Setting all sides to the same value */
inset: 20px;

/* Setting top/bottom and left/right pairs */
inset: 10px 20px;

/* Setting top, left/right, and bottom values */
inset: 10px 20px 30px;

/* Setting all sides individually */
inset: 10px 20px 30px 40px;

By using the shorthand notation, you can write more concise and readable code when setting the inset values for an element.

Individual Inset Properties

In addition to the shorthand inset property, CSS also provides properties to set the inset values for each side of an element. These properties are inset-top, inset-right, inset-bottom, and inset-left. Let's look at each of these properties.

inset-top

The inset-top property sets the top inset value of an element. It specifies the distance between the top edge of the element and the top edge of its containing block.

CSS 'inset-top' Example

.box {
  position: absolute;
  inset-top: 20px;
}

inset-right

The inset-right property sets the right inset value of an element. It specifies the distance between the right edge of the element and the right edge of its containing block.

CSS 'inset-right' Example

.box {
  position: absolute;
  inset-right: 30px;
}

inset-bottom

The inset-bottom property sets the bottom inset value of an element. It specifies the distance between the bottom edge of the element and the bottom edge of its containing block.

CSS 'inset-bottom' Example

.box {
  position: absolute;
  inset-bottom: 40px;
}

inset-left

The inset-left property sets the left inset value of an element. It specifies the distance between the left edge of the element and the left edge of its containing block.

CSS 'inset-left' Example

.box {
  position: absolute;
  inset-left: 50px;
}

By using these individual inset properties, you can control the positioning of elements within their containing blocks. You can mix and match these properties with the shorthand inset property to achieve the desired layout.