CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



inset-inline-end

The inset-inline-end property is a part of the CSS Box Alignment Module Level 3. It is used to set the position of an element's inline-end edge within its containing block. The inline-end edge is the edge of an element that is opposite to its inline-start edge. It is also known as the right edge in left-to-right writing modes and the left edge in right-to-left writing modes.

The inset-inline-end property can be used to position an element relative to its containing block or to another element. It can be used in combination with other box alignment properties such as justify-content, align-items, and align-self to align and position elements within a container.

The syntax for the inset-inline-end property is as follows:

selector {
  inset-inline-end: <length> | <percentage> | auto | inherit;
}

The values that can be used with the inset-inline-end property are:

  • <length>: Specifies a fixed length value in pixels, ems, rems, or other valid CSS length units.
  • <percentage>: Specifies a percentage value relative to the width of the containing block.
  • auto: The default value. The browser automatically calculates the position of the element's inline-end edge.
  • inherit: Inherits the value from the parent element.

Here are some examples of how the inset-inline-end property can be used:

Example 1: Positioning an Element Relative to its Containing Block

In this example, we will position a <div> element relative to its containing block using the inset-inline-end property:

<div class="container">
  <div class="box"></div>
</div>


In this example, we have a <div> element with a class of container that has a width and height of 500 pixels and a background color of #f2f2f2. We have also set the display property to flex and used the justify-content and align-items properties to center the child elements within the container.

The child element is a <div> element with a class of box that has a width and height of 100 pixels and a background color of #333. We have used the inset-inline-end property to position the element 50 pixels from the inline-end edge of its containing block.

Example 2: Positioning an Element Relative to Another Element

In this example, we will position a <div> element relative to another <div> element using the inset-inline-end property:

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>


In this example, we have a <div> element with a class of container that has a width and height of 500 pixels and a background color of #f2f2f2. We have also set the display property to flex and used the justify-content and align-items properties to center the child elements within the container.

The first child element is a <div> element with a class of box1 that has a width and height of 100 pixels and a background color of #333.

The second child element is a <div> element with a class of box2 that has a width and height of 100 pixels and a background color of #f2f2f2. We have used the inset-inline-end property to position the element 50 pixels from the inline-end edge of the <div> element with a class of box1.

These are just a few examples of how the inset-inline-end property can be used. It is a powerful tool for positioning and aligning elements within a container.

Conclusion

The inset-inline-end property is a part of the CSS Box Alignment Module Level 3. It is used to set the position of an element's inline-end edge within its containing block. It can be used in combination with other box alignment properties to align and position elements within a container. The inset-inline-end property is a powerful tool for creating responsive and dynamic layouts.

References

Activity