PLAY CSS
jaen

Layout

inset

inset is a shorthand that sets top, right, bottom and left together on a positioned element (one whose position is not static).

Syntax

<'top'>{1,4}

Preview

1234
Presets
Sample
Items
Drag the bottom-right corner to resize

Code

.box {
  display: flex;
  position: relative;
}

.box > :nth-child(2) {
  position: absolute;
  inset: 16px 16px auto auto;
}

Controls

inset
Same value for every side
top16px
right16px
bottomauto
leftauto
1234

About

Writing the value

Like margin, it takes one to four values: four go top, right, bottom, left (clockwise), and two set top/bottom and left/right. Each is a length, a % or auto, and negative values are allowed. Percentages refer to the containing block’s width (left and right) or height (top and bottom).

auto and placement

  • With only one of two opposite sides set, the element is placed that far from that side. The preview starts 16px from the top and the right.
  • With both auto, it goes where it would have been in the normal flow (its static position). In a flexbox that is where it would sit as the only item, so inset: auto here puts item 2 over the box’s top left corner.
  • With both set and the width or height auto, it stretches between them. inset: 0 is the usual way to fill the containing block. The items here have a fixed width, so the left value wins horizontally and only the height stretches.

Watch out

  • It has no effect when position is static. The item here has position: absolute.
  • Chrome and Edge support it from 87, Firefox from 66, Safari from 14.1. The writing-mode-relative inset-block and inset-inline exist too.

References

MDN Web DocsinsetSpecificationCSS Positioned Layout Module Level 3Can I useinset

Comments

PLAY CSS