inset

inset is shorthand for top, right, bottom, and left. Its offsets affect positioned elements, not ordinary static boxes. Despite its association with logical CSS, this shorthand uses physical sides.

Fill a containing block with a gutter

The parent establishes the absolute containing block. With automatic width and height, four 16px offsets make the child fill the remaining area.

<div class="parent"><div class="child">16px from each edge</div></div>

.parent {
  position: relative;
  height: 140px;
  background: #e2e8f0;
}
.child {
  position: absolute;
  inset: 16px;
  background: #dbeafe;
  padding: 0.5rem;
}

Place a decorative frame without moving content

The frame covers the parent’s padding box. Pointer-events:none prevents the decorative layer from intercepting clicks, while the content stays in normal flow.

<section class="card">
  <h2>Practice note</h2>
  <p>Keep content readable as it grows.</p>
  <button type="button" onclick="this.textContent='Saved'">Save note</button>
</section>

.card {
  position: relative;
  padding: 1rem;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #2563eb;
  border-radius: 0.5rem;
  pointer-events: none;
}
button {
  min-height: 44px;
  padding: 0.5rem 1rem;
}

Values and resets

All four longhands initially use auto and are not inherited. One value sets all sides; two set top/bottom then left/right; three set top, left/right, bottom; four go top, right, bottom, left. The shorthand resets every side, including previously declared offsets.

Lengths, percentages, negative values, and auto are allowed. Top/bottom percentages use containing-block height; left/right percentages use its width. Anchor-positioning functions have separate support requirements and prerequisites.

Why the box does not stretch

For a non-replaced absolute box, opposite offsets can determine its size when that dimension is auto. A fixed width or height can overconstrain the offsets instead. Relative offsets move a box from its original place; they do not define four gutters around a parent.

Use inset-inline and inset-block when edges should follow writing mode. Learn position, top, and left to inspect individual offsets.

Sources and browser support

MDN: inset describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

Positioning details explain containing blocks and inset constraints.