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

inset-inline-start

Definition

The inset-inline-start CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.

Examples

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

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

This sets the inset-inline-start of all <img> elements to 10% of the width of their containing block from the start edge:

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

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

span {
  position: relative;
  inset-inline-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 width 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-inline-start.
  • Avoid using inset-inline-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 width calculation, ensuring consistent spacing between elements.
  • Avoid using left and right properties when inset-inline-start is used, as they may interfere with each other.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes