CSS inset-block-start 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-start property is a logical offset that positions an element relative to the start edge of the block axis of its containing block. In practical terms, it moves the element away from the block-start side (which corresponds to the top in typical horizontal-tb layouts) without referring to physical directions; the mapping of “block start” depends on the document’s writing mode. Because it’s a logical property, it makes responsive and internationalized layouts simpler: the same declaration adapts automatically when text direction or writing mode changes.

This property only affects elements that are positioned (i.e., those with a non-static position value). For an element with position: relative, changing inset-block-start offsets the element visually while leaving its original space in the flow; for absolutely positioned elements, it establishes the offset from the containing block’s block-start edge and removes the element from normal flow. It is therefore frequently used together with positioning strategies to place UI elements precisely—such as tooltips, overlays, or anchored controls—without changing surrounding layout structure.

Conceptually, inset-block-start complements other logical and shorthand properties. It can be considered the block-axis counterpart to inline-start offsets and is related to the single-value shorthand inset that can set multiple logical offsets at once. When choosing between displacement in flow versus offsetting a positioned box, authors sometimes use the logical margin counterpart (for spacing in normal flow) instead; that relationship highlights how logical properties let you express intent (start/end along block/inline axes) rather than physical directions, which is especially useful when the writing-mode changes the layout orientation.

Definition

Initial value: auto
Applies to: positioned elements
Inherited: no
Computed value: same as box offsets: top, right, bottom, left properties except that directions are logical
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.insetBlockStart

Interactive Demo

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

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

inset-block-start: 20%;
writing-mode: horizontal-tb;
direction: rtl;

inset-block-start: 20%;
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-start: auto | <length-percentage>

Values

<length-percentage>Specifies distance in px, pt, cm, etc. Negative values are allowed.

Example

HTML

<div class='example'>

  <h2>inset-block-start examples</h2>



  <div class='container ltr'>

    <div class='box'>LTR: inset-block-start: 24px</div>

  </div>



  <div class='container rtl'>

    <div class='box'>RTL: inset-block-start: 24px</div>

  </div>

</div>

CSS

.example {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 24px;
  background: #f3f6fb;
}

.container {
  position: relative;
  width: 360px;
  height: 120px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e6e9ee;
  margin: 16px 0;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
}

.container.rtl {
  direction: rtl;
}

.box {
  position: absolute;
  inset-block-start: 24px;     /* logical start on the block axis (top in LTR/English) */
  inset-inline-start: 24px;    /* logical start on the inline axis (left in LTR, right in RTL) */
  inline-size: 200px;
  block-size: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #3778c2, #2a5f9e);
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(41, 58, 86, 0.12);
  font-weight: 600;
}

Result

Editor

Browser Support

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