CSS inset-block Property


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
Computed value
See individual properties
See individual properties
JavaScript syntax

Interactive Demo

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.


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


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


<p class="exampleText">Example text</p>
div {
  background-color: yellow;
  width: 120px;
  height: 120px;

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

Browser Support

The following table will show you the current browser support for the CSS inset-block property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024