CSS inset-block-end Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The inset-block-end CSS property is a part of the "inset" shorthand property used for specifying the offset distance of an element from its containing block in the block direction. Specifically, "inset-block-end" sets the distance between the bottom edge of the element and the bottom edge of its containing block. It is commonly used in conjunction with other inset properties like "inset-block-start," "inset-inline-start," and "inset-inline-end" to precisely position elements within their containers. This property is particularly useful for creating responsive and flexible layouts in CSS, allowing developers to control element positioning with ease.

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.insetBlockEnd

Interactive Demo

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

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

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

inset-block-end: 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-end: 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-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}

Result

Editor