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

inset-inline-end

Definition

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

Examples

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

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

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

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

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

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

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes