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

inset-block-start

Definition

The inset-block-start property is used to set the distance between the top edge of an absolutely positioned element and the top edge of its containing block, in a vertical writing mode. This property is part of the CSS Logical Properties and Values specification and can be used instead of top when writing styles that need to be direction-agnostic.

Examples

This sets the inset-block-start of all <div> elements to 50px from the top edge of their containing block:

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

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

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

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:

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

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-start.
  • Use the auto value to return elements to their default position in the document flow.
  • Avoid using inset-block-start 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