CSS inset: How to use it

The CSS inset property is a shorthand for setting the position-related properties top, right, bottom, and left in one declaration.

So, for example, setting:

position: absolute;
inset: 10px 20px 30px 40px; /* top right bottom left */

is the same as setting:

position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

You can use it to set the distance to the parent element from the absolute/fixed/relative positioned element.

The shorthand syntax looks like padding and margin:

.example {
	inset: 10px; /* 10px on all sides */
	inset: 10px 20px; /* 10px vertically, 20px horizontally */
	inset: 10px 20px 30px; /* 10px top, 20px horizontally, 30px bottom */
	inset: 10px 20px 30px 40px; /* 10px top, 20px right, 30px bottom, 40px left */
}

• 1 value: Applies the same value to all four sides.
• 2 values: The first value applies to top and bottom, and the second applies to right and left.
• 3 values: The first value applies to top, the second to right and left, and the third to bottom.
• 4 values: Applies specific values to top, right, bottom, and left.

.syntax {
	inset: <top> <right> <bottom> <left>;
}

Centering an element

Centering an absolutely positioned element inside its container is a common task. With the inset CSS property, you can do it elegantly:

.centered {
	position: absolute;
	inset: 0;
	margin: auto;
}

This centers the element both vertically and horizontally within its parent.

Limitations of CSS inset

While the CSS inset property is powerful, there are a few things to keep in mind:

1. Requires positioning: Without a non-static position, inset will have no effect, so remember to set position to: absolute, fixed, or relative.
2. Not always readable: For complex layouts, explicitly defining top, right, etc., can sometimes be more intuitive for other developers reading your code.

Browser Compatibility

The inset CSS property is widely supported in modern browsers, including the latest versions of ✅ Chrome, ✅ Edge, ✅ Firefox, and ✅ Safari. However, it’s not supported in ❌ Internet Explorer (Source: CanIUse).

---

Become a CSS Pro

Try your design ideas in seconds with a universal visual CSS editor that generates code for you. Say hello to speed, joy, and stunning designs in just a few clicks with CSS Pro. Click here to try it free.