CSS inset-block Property

What You’ll Learn

The inset-block property sets offsets along the block axis using logical CSS. It is the block-axis counterpart to physical top and bottom properties.

Introduction

The inset-block property in CSS is part of the Logical Properties and Values specification. It lets you control the block-start and block-end offsets of a positioned element in one declaration.

This is especially useful for layouts that must adapt to different writing modes, such as left-to-right, right-to-left, and vertical text directions.

Definition and Usage

Apply inset-block on positioned elements when you want to offset them along the block axis. In normal horizontal English pages, that usually means top and bottom offsets.

📝 Syntax

The syntax for the inset-block property accepts one or two values:

element {
  inset-block: value;
}

element {
  inset-block: block-start block-end;
}

• One value — applies to both block-start and block-end.
• Two values — first value is block-start; second is block-end.

Basic Example

.box {
  position: absolute;
  inset-block: 10px 20px;
  inline-size: 100px;
}

Default Value

The default value of the inset-block property is auto, which means the browser determines block-axis placement from other positioning rules.

Syntax Rules

• Shorthand for inset-block-start and inset-block-end.
• Only works when position is not static.
• The property is not inherited.
• Accepts length, percentage, and auto values.
• In horizontal writing mode, maps to top and bottom.

💎 Property Values

Block Axis and Writing Modes

Logical inset properties follow the document’s writing mode instead of fixed physical directions:

• Horizontal mode (writing-mode: horizontal-tb) — block axis is vertical; inset-block controls top and bottom offsets.
• Vertical mode (writing-mode: vertical-rl) — block axis rotates; the same property controls the logical block direction.
• Related shorthand — inset-inline handles the inline axis, and inset sets all four sides together.

Examples Gallery

Set two block offsets, stretch with inset-block: 0, use a single value, and see behavior in vertical writing mode.

.box {
  position: absolute;
  inset-block: 10px 20px;
  inline-size: 100px;
}

.sidebar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4rem;
}

.box {
  position: absolute;
  inset-block: 1rem;
  inset-inline: 2rem;
}

.container {
  writing-mode: vertical-rl;
  position: relative;
}

.box {
  position: absolute;
  inset-block: 12px 24px;
}

♿ Accessibility

• Positioning does not change reading order — DOM order still matters for screen readers.
• Test vertical and RTL layouts — Logical offsets should not hide essential content.
• Avoid covering focusable controls — Absolutely positioned panels can block keyboard access.
• Support zoom on mobile — Fixed block offsets should not clip important text.
• Announce overlays properly — Use appropriate ARIA roles for modal and toast UI.

💡 Best Practices