CSS inset attribute

Previous Page inline-size
Next Page inset-block

Definition and Usage

inset The attribute is used to set the distance between an element and its parent element.

Note:To make this attribute effective, you must specify position attribute.

inset The attribute is a shorthand for the following attributes:

top
bottom
left
right

inset The value of the attribute can be set in different ways:

If the inset property has four values:

inset: 15px 30px 60px 90px;

The top distance is 15px
The right distance is 30px
The bottom distance is 60px
The left distance is 90px

If the inset property has three values:

inset: 15px 30px 60px;

The top distance is 15px
The left and right distances are 30px
The bottom distance is 60px

If the inset property has two values:

inset: 15px 30px;

The top and bottom distances are 15px
The left and right distances are 30px

If the inset property has one value:

inset: 10px;

The distances in all four directions are 10px

Example

Example 1

Set the distance between the positioned <div> element and the parent element:

div {
  inset: 35px;
}

Try It Yourself

Example 2

Sets the inset The attribute value is set to 15 pixels from the top and bottom of the parent element, 30 pixels from the left and right of the parent element:

div {
  inset: 15px 30px;
}

Try It Yourself

Example 3

Sets the inset The attribute value is set to 15 pixels from the top of the parent element, 30 pixels from the left and right of the parent element, and 60 pixels from the bottom of the parent element:

div {
  inset: 15px 30px 60px;
}

Try It Yourself

Example 4

Sets the inset The attribute value is set to 15 pixels from the top of the parent element, 30 pixels from the right of the parent element, 60 pixels from the bottom of the parent element, and 90 pixels from the left of the parent element:

div {
  inset: 15px 30px 60px 90px;
}

Try It Yourself

CSS Syntax

inset: auto|length|initial|inherit;

Attribute Value

Value	Description
auto	Default Value. The default inset distance of the element.
length	Use fixed units (such as px, pt, cm, etc.) to specify the distance. Negative values are allowed. See:CSS Units.
%	Use percentages to specify the distance, relative to the parent element's size on the corresponding axis.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	auto
Inheritance:	No
Animation Creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.inset="100px 50px"