inset – the shorthand for top, right, bottom and left CSS properties

Published at: Apr 05 2020
Updated at: Dec 22 2021
Reading time: 2min

This post is part of my Today I learned series in which I share all my web development learnings.

I read Ahmad Shadeed's article CSS Findings From The New Facebook Design, and learned about the inset CSS property. It saves a lot of keystrokes when positioning elements!

The CSS Logical Properties and Values Level 1 specification includes many new CSS properties that make styling dependent on logical rather than physical conditions. New properties like margin-inline-start aim to replace margin-left. They take, for example, left and(!) right-aligned languages into consideration.

The addition of logical properties is another step forward to make the web more adjustable to user content preferences. Margins, paddings, borders and others properties can follow the language preference. Left margins can become right margins and vice-versa. That is excellent news!

Suprisingly, the Logical Properties spec also introduced a new CSS property that still considers physical dimensions. inset is a shorthand that corresponds to the top, right, bottom, and/or left CSS properties. Use this new CSS property to shorten common absolute positioning declarations. It follows the same syntax that developers know from margin/padding declarations.

.element {
  position: absolute;
  inset: 0; 
  /* 👆 is the same as `top: 0; right: 0; bottom: 0; left: 0;` */
  inset: 1em 2em; 
  /* 👆 is the same as `top: 1em; right: 2em; bottom: 1em; left: 2em;` */
  inset: 1em 2em 3em; 
  /* 👆 is the same as `top: 1em; right: 2em; bottom: 3em; left: 2em;` */
  inset: 1em 2em 3em 4em; 
  /* 👆 is the same as `top: 1em; right: 2em; bottom: 3em; left: 4em;` */
}