CSS inset-block Property

Description

The inset-block CSS property is a shorthand property that allows you to set the top and bottom positions of an element within its containing block simultaneously. It simplifies the process of positioning an element along the block axis (vertical positioning) within a container, typically when working with block-level elements. By using this property, you can specify values for the top and bottom properties in a single declaration, making it more concise and easier to maintain your CSS code while achieving the desired layout and spacing within your web page.

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>

  <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: 20px 50px;
  background-color: #c8c800;
}

Result

Editor