The inset-block-end property is a part of the CSS Box Alignment Module Level 3. It is used to set the position of the block-end edge of an element within its containing block. The block-end edge is the bottom edge of the element in horizontal writing modes and the right edge in vertical writing modes.
The inset-block-end property is used to position an element relative to its containing block. It is similar to the bottom property, but it is more flexible and can be used in conjunction with other alignment properties to create complex layouts.
The inset-block-end property can be used with any element that has a position of absolute, fixed, or sticky. It is also supported by all modern browsers.
Here are some examples of how to use the inset-block-end property:
In this example, we will position an element 20 pixels from the bottom of its containing block:
.box {
position: absolute;
inset-block-end: 20px;
}
In this example, we will position an element 20 pixels from the bottom of its containing block and 10 pixels from the right edge:
.box {
position: absolute;
inset-block-end: 20px;
inset-inline-end: 10px;
}
In this example, we will position an element 20 pixels from the bottom of its containing block and center it horizontally:
.box {
position: absolute;
inset-block-end: 20px;
inset-inline-start: 50%;
transform: translateX(-50%);
}
These are just a few examples of how the inset-block-end property can be used. It can be combined with other alignment properties to create complex layouts.
The inset-block-end property is a powerful tool for positioning elements within their containing blocks. It is flexible and can be used in conjunction with other alignment properties to create complex layouts. It is supported by all modern browsers and is easy to use.