Definition
The inset CSS property is a shorthand property that combines the individual properties for top, right, bottom, and left offsets in one declaration. It is primarily used to specify the positioning or placement of an element within its containing element.
The inset property accepts one, two, three, or four values, representing the offsets for the top, right, bottom, and left sides, respectively. These offsets can be defined using various length units, such as pixels (px), percentages (%), or the auto keyword.
Here’s an example:
.box {
inset: 20px 30px;
}
In this example, the .box element is positioned 20 pixels from the top and bottom edges and 30 pixels from the right and left edges of its containing element.
You can also specify different offsets for each side individually:
.box {
inset: 10px 20px 15px 5px;
}
In this case, the .box element is positioned 10 pixels from the top, 20 pixels from the right, 15 pixels from the bottom, and 5 pixels from the left.
The inset property provides a convenient way to define the position and placement of an element within its containing element. It simplifies the declaration of multiple offset properties and helps create visually appealing layouts.