CSS inset-inline-end Property
Description
The inset-inline-end
CSS property is used to define the distance between the inline-end edge (the right edge in left-to-right writing modes) of an element and its containing block. It is particularly useful for positioning and aligning elements within a layout. You can use it to set precise margins or padding on the inline-end side of an element, ensuring accurate placement and spacing in your web design. This property is part of the CSS Logical Properties module, which allows for more adaptable and language-independent layouts by considering the logical, rather than physical, direction of content.
- 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.insetInlineEnd
Interactive Demo
Syntax
inset-inline-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-inline-end: 20px;
background-color: #c8c800;
}
Browser Support
The following table will show you the current browser support for the CSS inset-inline-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