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.
![](jpg/icon-margin-right903e.jpg)
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-star t 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:
inset
property is not logical
Heads up: The 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
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)