CSS inset-block for Vertical Layout Boundaries

The CSS inset-block property is a logical shorthand property used to define the distance between a positioned element and its containing block along the block axis. In standard horizontal writing modes, the block axis runs vertically, making inset-block the modern logical alternative to declaring physical top and bottom offsets. This article explains how inset-block establishes vertical boundaries, how its syntax works, and why it provides greater flexibility for responsive and internationalized web layouts.

Understanding inset-block

The inset-block property combines inset-block-start and inset-block-end into a single declaration. It applies to positioned elements—elements with a position value of relative, absolute, fixed, or sticky.

In default left-to-right (LTR) and right-to-left (RTL) scripts using writing-mode: horizontal-tb, the block axis is vertical:

• inset-block-start maps to the physical top property.
• inset-block-end maps to the physical bottom property.

Syntax and Offset Configuration

The property accepts standard length units, percentages, or keywords like auto:

• Single value: Applies the same offset to both vertical boundaries.

  .modal {
    position: fixed;
    inset-block: 2rem; /* Sets both top and bottom to 2rem */
  }

• Two values: The first value sets the start (top) boundary, and the second sets the end (bottom) boundary.

  .banner {
    position: absolute;
    inset-block: 10px 30px; /* Top: 10px, Bottom: 30px */
  }

Setting Vertical Boundaries and Full Stretching

A common use case for inset-block in layout design is spanning an element across the entire height of its container. Specifying inset-block: 0; pins the element to both the top and bottom edges simultaneously:

.sidebar-overlay {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 300px;
}

When an element has inset-block: 0 without a fixed height, the browser stretches the element to fill the entire vertical space of its containing block. If a fixed height is defined, combining inset-block: 0 with margin-block: auto centers the element vertically within its boundaries.

Advantages Over Physical Offsets

Using inset-block rather than top and bottom decouples positioning logic from physical screen coordinates. If a page or component switches to a vertical writing mode (such as vertical-rl or vertical-lr for East Asian typography), the block axis automatically shifts from vertical to horizontal. The boundaries defined by inset-block will seamlessly adapt to the new block direction without requiring media queries or rewritten positioning rules.