CSS inset-block-end Property

Definition and Usage

The inset-block-end property sets the logical block-end offset of a positioned element. In the default horizontal writing mode, that usually means the same edge as bottom.

With writing-mode: vertical-rl, the same value maps to a different physical side (often left). It has no effect on static elements. Pair it with inset-block-start, or set both via inset-block.

CSS Syntax

The initial value is auto. The property is not inherited. Percentages refer to the containing block’s size on the block axis.

Property Values

How to Use inset-block-end

Position the element, then offset it from the block-end edge.

1. Create 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-end with a length or percentage.
4. Optionally change writing-mode to see which physical edge moves.

Live Preview

The blue box is position: absolute. Change only inset-block-end. In horizontal text this acts like bottom.

CSS Examples

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

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

<div class="stage">
  <div class="box">end: 20px</div>
</div>

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

<div class="stage">
  <div class="box">end: 20%</div>
</div>

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

<div class="stage">
  <div class="box">Follows block-end</div>
</div>

Key Takeaways