CSS inset-block-end Property

What You’ll Learn

The inset-block-end property controls the offset of an element’s block-end edge using logical CSS. In horizontal English pages, that usually means the bottom edge.

Introduction

The inset-block-end property in CSS is a logical property that lets you control the offset of an element’s block-end edge in a flow-relative manner.

It is part of the Logical Properties and Values specification, which helps you write CSS that adapts to different writing modes such as left-to-right, right-to-left, and vertical text layouts.

Definition and Usage

Apply inset-block-end on positioned elements when you need to offset or anchor the block-end side only. Use it to pin footers, toolbars, badges, or any UI element to the logical end of the block axis.

📝 Syntax

The syntax for the inset-block-end property accepts a single value:

element {
  inset-block-end: value;
}

Basic Example

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

Default Value

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

Syntax Rules

• Longhand for the block-end side of the inset-block shorthand.
• Only works when position is not static.
• The property is not inherited.
• Accepts length, percentage, and auto values.
• In horizontal writing mode, maps to bottom.

💎 Property Values

Block-End and Writing Modes

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

• Horizontal mode (writing-mode: horizontal-tb) — block-end is usually the physical bottom edge.
• Vertical mode (writing-mode: vertical-rl) — block-end follows the rotated block axis, not necessarily the bottom of the screen.
• Related longhands — inset-block-start controls the opposite block edge; inset-block sets both in one rule.

Examples Gallery

Offset from the block-end edge, anchor a footer bar, stretch with block-start, and see behavior in vertical writing mode.

.box {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-end: 20px;
  inline-size: 100px;
}

.footer-bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2.5rem;
}

.panel {
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 1rem;
  inset-block-end: 1rem;
  inline-size: 5rem;
}

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

.box {
  position: absolute;
  inset-block-end: 16px;
}

♿ 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 — Bottom bars and overlays can block keyboard access.
• Support zoom on mobile — Fixed block-end offsets should not clip important text.
• Announce overlays properly — Use appropriate ARIA roles for modal and toast UI pinned to block-end.

💡 Best Practices