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

inset-block-end

Definition

The inset-block-end property is used to set the distance between the bottom edge of an absolutely positioned element and the bottom 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 bottom when writing styles that need to be direction-agnostic.

Examples

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

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

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

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

This sets the inset-block-end of all <span> elements to 20% of the height of their containing block, plus an additional 10px from the bottom edge:

span {
  position: relative;
  inset-block-end: 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-end.
  • Use the auto value to return elements to their default position in the document flow.
  • Avoid using inset-block-end 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