CSS - inset Property

CSS inset property is used to control the position of an element relative to its containing block. It is a shorthand property for defining values to the properties top , right , bottom , and / or left in a single statement. The position property must be declared in order for the property to show its effect.

Syntax

inset: auto | length | percentage | initial | inherit;

Property Values

Examples of CSS Inset Property

The following examples explain the inset property with different values.

Inset Property with Auto Value

To let the browser calculate the positioning based on the element’s default behavior or other factors, we use the auto value. This value is often used to align the elements position according to its containing block’s edges. This is shown in the following example.

Example

Inset Property with Length Values

To set the position of the element, we can use length units (e.g. px,rem,em etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.

Example

Inset Property with Percentage Values

To set the position of the element, we can use percentage values (e.g. 5%, 10% etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.

Example

Inset Property with Mixed Values

To set the position of the element, we can use a combination of length units (e.g. px,rem,em etc.) and percentage values (e.g. 10%, 20% etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.

Example

Note: The inset property accepts different number of parameters, so depending on the number of values provided, the corresponding edges will be affected.

• One value : it applies distance to all four edges equally.

• Two values : the first value provides distance to top and bottom edges while the second value provides value to the left and right edges.

• Three values : the first value provides distance to the top edge, second value provides distance to left and right edges and the third value provides distance to the bottom edge.

• Four Values : the first value provides distance to the top edge, second value to the right edge, third value to the bottom edge and fourth value to the left edge.

Supported Browsers