CSS inset-inline-end

The inset-inline-end property in CSS is used to specify the distance between the end edge of a box and its nearest block-level ancestor’s content edge. This property allows you to create space between an element's edge and the edge of its containing block along the inline axis.

Here is the syntax for using the inset-inline-end property:


selector {
  inset-inline-end: value;
}

The values that can be used with the inset-inline-end property include lengths (such as pixels, ems, rems), percentages, or the keyword auto.

Let's see some examples to better understand how the inset-inline-end property works:

Result:

This is an example text with inset-inline-end set to 20px.


div {
  inset-inline-end: 20px;
  border: 1px solid black;
  padding: 10px;
}

In this example, the text is enclosed in a <div> element with the inset-inline-end property set to 20px. This creates a space of 20 pixels between the end edge of the <div> element and its containing block.

Result:

This is an example text with inset-inline-end set to 10%.


div {
  inset-inline-end: 10%;
  border: 1px solid black;
  padding: 10px;
}

In this example, the <div> element has the inset-inline-end property set to 10%, creating a space that is 10% of the width of its containing block.

Experiment with different values for the inset-inline-end property to see how it affects the positioning of elements within your layout.