CSS inset-block Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The inset-block CSS property controls an element’s offset along the block axis of the current writing mode — in other words, how far it sits from the block-start and block-end edges of its containing box. Because it operates on the logical block dimension rather than physical top/bottom sides, it adapts automatically when the writing-mode or block flow changes (for example, when switching between horizontal and vertical text directions). This makes it a useful tool for building layouts that need to behave consistently across different writing modes without rewriting separate physical offsets.

When applied to positioned boxes, inset-block participates in the offset calculations that determine where the box is placed in the block direction. It is conceptually the block-axis counterpart to properties that address both axes; for example, it relates to the umbrella logical shorthand inset and pairs with its inline sibling inset-inline. Because it targets the logical axis rather than specific physical edges, using inset-block helps avoid conditional rules for different writing-modes and reduces duplication when designing internationalized or rotated layouts.

In practice, inset-block is commonly used in combination with element positioning and spacing rules to create predictable, direction-agnostic offsets. It interacts with positioning schemes (see position) and sits alongside box-model properties such as margin and padding when determining final placement and spacing relationships. By relying on logical offsets instead of hard-coded physical top/bottom values, authors can make components that retain their intended spatial relationships regardless of writing mode, text orientation, or locale-specific flow.

Definition

Initial value: See individual properties
Applies to: positioned elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.insetBlock

Interactive Demo

inset-block: 10px 20px;
writing-mode: horizontal-tb;

inset-block: 20px 40px;
writing-mode: vertical-rl;

inset-block: 5% 20%;
writing-mode: horizontal-tb;

inset-block: 1rem auto;
writing-mode: vertical-lr;

I am absolutely positioned.

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

inset-block: <top>{1,2}

Values

<top>{1,2}The first value represents the start edge style, and the second value represents the end edge style. If only one value is given, it applies to both the start and end edges.

Example

HTML

<div class="container">

  <div class="box">Inset-block: 20px 40px</div>

</div>



<div class="vertical-container">

  <div class="box">Vertical writing-mode<br>Inset-block: 18px 60px</div>

</div>

CSS

.container {
  position: relative;
  width: 620px;
  height: 160px;
  border: 1px solid #ddd;
  margin: 20px;
  padding: 0;
  background: #f9f9f9;
}

.box {
  position: absolute;
  inset-block: 20px 40px; /* block-start | block-end */
  inset-inline: 20px;     /* inline start & end */
  background: linear-gradient(135deg, #dff7e1, #b7e4a5);
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-radius: 6px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.vertical-container {
  position: relative;
  width: 220px;
  height: 260px;
  border: 1px dashed #ccc;
  margin: 20px;
  writing-mode: vertical-rl;
  background: #fff;
}

.vertical-container .box {
  inset-inline: 24px;
  inset-block: 18px 60px;
  background: linear-gradient(135deg, #e6f0ff, #c8ddff);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS inset-block property. Hover over a browser icon to see the version that first introduced support for this CSS property.