CSS inset-block-end Property
Description
The inset-block-end
CSS property is a part of the "inset" shorthand property used for specifying the offset distance of an element from its containing block in the block direction. Specifically, "inset-block-end" sets the distance between the bottom edge of the element and the bottom edge of its containing block. It is commonly used in conjunction with other inset properties like "inset-block-start," "inset-inline-start," and "inset-inline-end" to precisely position elements within their containers. This property is particularly useful for creating responsive and flexible layouts in CSS, allowing developers to control element positioning with ease.
- Initial value
- auto
- Applies to
- positioned elements
- Inherited
- no
- Computed value
- same as box offsets: top, right, bottom, left properties except that directions are logical
- Animatable
- a length, percentage or calc();
- JavaScript syntax
- object.style.insetBlockEnd
Interactive Demo
Syntax
inset-block-end: auto | <length-percentage>
Values
- <length-percentage>Specifies distance in px, pt, cm, etc. Negative values are allowed.
Example
<div>
<p class="exampleText">Example text</p>
</div>
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
position: relative;
inset-block-end: 20px;
background-color: #c8c800;
}
Browser Support
The following table will show you the current browser support for the CSS inset-block-end
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
87 | 87 | 63 | 73 | 14.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
87 | 63 | 62 | 14.5 | 14 | 87 |
Last updated by CSSPortal on: 2nd January 2024