CSS inset-block-start Property

Description

The inset-block-start CSS property defines the offset or distance between the starting edge of an element's containing block and the starting edge of the element itself within the block flow. This property is particularly useful for creating flexible and responsive layouts in CSS Grid and Flexbox, allowing precise control over the positioning of elements within their parent containers. The "start" edge depends on the writing mode; for horizontal writing modes like left-to-right, it typically refers to the left edge, while for vertical writing modes, it refers to the top edge. By adjusting the inset-block-start value, web developers can control the placement of elements, making it an essential tool for creating modern and adaptable web designs.

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>

  <p class="exampleText">Example text</p>

</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block-start: 20px;
  background-color: #c8c800;
}

Result

Editor