inset-block

inset-block sets how far a positioned element (one whose position is not static) sits from the start and end of the direction lines advance in (the block direction). In horizontal writing, it is top and bottom.

Syntax

<'top'>{1,2}

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-inline-end: 16px;
  inset-block: 16px 48px;
}

Controls

inset-block

Same value on both sides

inset-block-start16px

inset-block-end48px

1234

About

Writing the value

One value applies to both sides. Two values apply to the start (inset-block-start) and the end (inset-block-end), in that order.
It takes the same values as inset: lengths, %, auto, and negative values. A % is a share of the containing block's size in that direction (its height in horizontal writing). The initial value is auto.
With one side set, the element is placed that far from that side. With both set and an auto height, it stretches between them. In the preview, the item starts by stretching from 16px below the top of the box to 48px above its bottom.

The preview makes the box position: relative with a helper declaration and writes position: absolute and inset-block on the second item. A helper inset-inline-end: 16px moves the item to the right edge. The preview is horizontal, so the start is the top and the end is the bottom.

How the direction changes it

In writing-mode: vertical-rl, lines advance from right to left, so the start is the right and the end is the left. In vertical-lr, the start is the left.
Which sides they are depends on the element's own writing-mode, not on its containing block's. direction does not change them.

When to use it

inset-block: 0 stretches a sidebar or divider placed at the side across the full height of its containing block.

Watch out

It has no effect on elements whose position is static.
In horizontal writing, it refers to the same sides as top and bottom. When an element has both, the one written later wins.
Works in all major browsers.

References

MDN Web Docsinset-block SpecificationCSS Positioned Layout Module Level 3 Can I useinset-block