CSS inset-block Property

Definition and Usage

The inset-block property is a shorthand for inset-block-start and inset-block-end. It sets offsets along the block axis.

In the default horizontal writing mode that usually means top and bottom. With writing-mode: vertical-rl, the same values map to the physical right and left edges. It only affects positioned elements. For the other axis, use inset-inline. Physical four-side shorthand is inset.

CSS Syntax

One value sets start and end the same. Two values set start first and end second. Each longhand starts as auto. The property is not inherited.

Property Values

How to Use inset-block

Position the element, then set block-axis offsets.

1. Make a containing block if needed (position: relative on the parent).
2. Set the child to position: absolute (or another non-static value).
3. Add inset-block with one or two lengths/percentages.
4. Optionally set writing-mode to see the offsets map to different physical edges.

Live Preview

The blue box is position: absolute. Change only inset-block. Left/right stay at auto unless you stretch elsewhere.

CSS Examples

Each snippet focuses on inset-block. Position is required so the offsets apply. Use Try It Yourself for a live editor.

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    left: 16px;
    right: 16px;
    inset-block: 16px;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">inset-block: 16px</div>
</div>

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    left: 16px;
    right: 16px;
    inset-block: 8px 32px;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">8px start, 32px end</div>
</div>

<style>
  .stage {
    position: relative;
    height: 160px;
    border: 1px dashed #94a3b8;
    writing-mode: vertical-rl;
  }
  .box {
    position: absolute;
    inset-inline: 12px;
    inset-block: 16px 32px;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">Follows block axis</div>
</div>

Key Takeaways