CSS Inset: The Modern Shorthand for Positioning

Writing top: 0; right: 0; bottom: 0; left: 0; to fill a container is muscle memory for most developers, but it's verbose and repetitive. The inset property is the modern shorthand that replaces this boilerplate with a single, concise declaration.

The Shorthand Syntax

Just like margin and padding, the inset property accepts up to four values, following the standard clockwise order: top, right, bottom, left.

/* The old way */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* The modern way */
.modal-backdrop {
  position: fixed;
  inset: 0;
}

It supports all the standard multi-value patterns:

• 1 value: Applies to all four sides (inset: 10px)
• 2 values: top/bottom, left/right (inset: 10px 20px)
• 3 values: top, left/right, bottom (inset: 10px 20px 30px)
• 4 values: top, right, bottom, left (inset: 10px 20px 30px 40px)

Logical Properties Connection

While inset maps to physical offsets, it sits alongside the logical property shorthands inset-block and inset-inline, which respect the document's writing mode (e.g., vertical text).

/* Physical offsets (top/bottom) */
.banner {
  inset: 10px 0; 
}

/* Logical offsets (block-start/block-end) */
.banner {
  inset-block: 10px; /* Adapts to writing-mode */
  inset-inline: 0;
}

Browser Support

The inset property has been supported in all major browsers since 2020 (Chrome 87+, Firefox 66+, Safari 14.1+). It is safe to use in production without prefixes or fallbacks for any modern application.