inset

The inset property in CSS is a shorthand for the four inset properties, top, right, bottom and left in one declaration. Just like the four individual properties themselves, inset has no effect on non-positioned (static) elements. In other words, an element must declare an explicit position value before inset properties can take effect.

.box {
  inset: 10px 20px 30px 40px;
  position: relative;
}

inset is initially defined in the CSS Logical Properties and Values Level 1 specification, which is in Editor’s Draft as of April 20, 2020.

Syntax

As you may have gathered from the example above, inset follows the same multi-value syntax of padding and margin. That means it accepts as many as four values (to declare offsets for top, right, bottom and left) and as few as one value (to declare an equal offset for all four properties). And, like padding and margin, the values flow in a clockwise direction, starting with top.

.element {
  inset: 1em 2em 3em 0; /* top right bottom left */
  inset: 10% 5% -10%;   /* top left/right bottom */
  inset: 0 10px;        /* top/bottom left/right */
  inset: 20px;          /* all edges = 20px */
}

Before inset, we’d have to declare each inset sub-property separately, like this:

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Now, we can simply that to a single line of CSS: 

.box {
  position: absolute;
  inset: 0; /* 🎉 */
}

Values

The inset property accepts numeric values just like top, right, bottom and left. Those values can be any valid CSS length, such as px, em, rem and %, among others.

Let’s talk about logical properties

We’re just going to scratch the surface of logical properties here since the real focus is on inset and its related sub-properties. Get a thorough deep-dive on the topic in this Smashing Magazine article by Rachel Andrew.

There are more inset sub-properties than top, right, bottom and left but, in order to understand them, it’s worth getting acquainted with logical properties and values.

Content can be displayed in different directions (i.e. writing modes), including left-to-right, right-to-left, top-to-bottom, and bottom-to-top. When we talk about “logical” concepts, we’re really referring to the starting point based on the writing direction of the content.

Imagine you are building a website that needs to support both left-to-right (LTR) languages, like English and Spanish, and right-to-left (RTL) languages, like Persian or Arabic. Let’s say you want to add a margin between an icon and a line text next to it.

Naturally, you might reach for the margin-right property to support LTR, then add another ruleset that removes that margin and replaces it with margin-left for RTL:

.icon {
  margin-right: 1em;
}


/* or .icon:dir(rtl) */
[dir="rtl"] .icon {
  margin-right: 0;
  margin-left: 1em;
}

This is a small part of a page. Now imagine building a large website in this way — that’s a lot of work! But logical properties make it a snap by taking the writing mode into consideration for us. For example, we can add margin to the end of the element, wherever that happens to be:

.icon {
  margin-inline-end: 1em;
}

This is what we mean when referring to logical properties — they’re relative to the the writing mode rather than a physical direction. See how logical properties are much more logical to work with?

Inset logical properties

So, knowing what you now know about logical properties, here are four additional inset sub-properties:

Logical Property	Horizontal Flow Equivalent	What it Does
inset-block-start	top	Specifies the offset for the starting edge in the direction which is perpendicular to the writing direction.
inset-block-end	bottom	Specifies the offset for the ending edge in the direction which is perpendicular to the writing direction.
inset-inline-start	left	Specifies the offset for the starting edge in the writing direction, which maps to a physical offset depending on the element’s writing mode, direction and text orientation.
inset-inline-end	right	Specifies the offset for the ending edge in the writing direction.

We can even group those four sub-properties into two additional shorthand properties:

Logical Property	Shorthand For	What it Does
inset-inline	inset-inline-start inset-inline-end	Accepts a single value to set both inset-inline-start and inset-inline-end. Also accepts two values, where the first specifies inset-inline-start and the second specifies inset-inline-end.
inset-block	inset-block-start inset-block-end	Accepts a single value to set both inset-block-start and inset-block-end. Also accepts two values, where the first specifies inset-block-start and the second specifies inset-block-end.

Demo

Change the writing-mode and values of inset properties to get a better idea of how they work:

Heads up: The inset property is not logical

Although inset is part of the Logical Properties and Values specification, it doesn’t define logical block or inline offsets. Instead, it defines physical offsets, regardless of the element’s writing mode, direction, and text orientation. In other words, inset is just shorthand for top, right, bottom and left.

There is some discussion here on GitHub regarding the use of some keywords to be able to use this property in a logical way too.

So, do we still use physical offsets? Imagine you want a badge or a logo fixed to the top and left corner of your page and, no matter the language, you want it to be there. In that case you can’t use logical offsets and will need to resort to physical properties instead.

Browser Support

Support for the inset property is still in its early stages. As of this writing, caniuse estimates global support at at 69.43%.

Desktop

Internet Explorer	Edge	Firefox	Chrome	Safari	Opera
No	91 (Feature Flag)	66+	87+	14.1+	73+

Mobile

iOS Safari	Opera Mini	Android Browser	Chrome Android	Firefox Android
14.6+	?	91+	91+	89+

Related Properties

• position
• top / right / bottom / left

More information

• CSS Logical Properties and Values Level 1 (Specification, Editor’s Draft)
• Understanding Logical Properties and Values (Smashing Magazine)
• CSS Logical Properties (CSS-Tricks)