1. css
  2. /properties
  3. /inset-block

inset-block

Definition

The inset-block property is used to set the vertical position of an absolutely positioned element within its containing block, using logical block values in a vertical writing mode. This property is part of the CSS Logical Properties and Values specification and can be used instead of using top and bottom or inset-block-start and inset-block-end together.

Examples

This sets the inset-block-start of all <div> elements to 50px from the top edge of their containing block, and the inset-block-end to 20% of the height of their containing block from the bottom edge:

  div {
  position: absolute;
  inset-block: 50px 20%;
}

This sets the inset-block-start of all <img> elements to 10% of the height of their containing block from the top edge, and the inset-block-end to 5% of the height of their containing block from the bottom edge:

img {
  position: fixed;
  inset-block: 10% 5%;
}

This sets the inset-block-start of all <span> elements to 20% of the height of their containing block, plus an additional 10px from the top edge, and sets the inset-block-end to auto, which returns the element to its default position in the document flow:

span {
  position: relative;
  inset-block: calc(20% + 10px) auto;
}

Values

ValueDescription
<length>Specifies a fixed distance in a specified CSS length unit.
<percentage>Specifies a distance as a percentage of the height of the containing block.
autoThe default value. The element's position is determined by the normal flow of the document.
inheritInherits the value from the element's parent.
initialSets the property to its default value.
unsetResets the property to its inherited value if it exists, otherwise sets it to its initial value.

Best Practices

  • Use relative units like em, rem, and % instead of absolute units like px to create responsive designs that adapt to different screen sizes.
  • Use calc() to perform calculations when setting the value of inset-block.
  • Use the auto value to return elements to their default position in the document flow.
  • Avoid using inset-block on non-positioned elements as it will have no effect.
  • Use the box-sizing: border-box; property to include padding and borders in the height calculation, ensuring consistent spacing between elements.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes