CSS inset-inline-start Property
Description
The inset-inline-start
CSS property is used to specify the distance between the inline (horizontal) edge of an element and the corresponding edge of its containing block. This property is particularly useful in modern CSS for creating flexible and responsive layouts. It allows developers to control the positioning of elements relative to their containing blocks along the inline axis, which is typically horizontal. By setting values for inset-inline-start, designers can precisely position elements, such as text or images, and adjust their placement based on the available space and layout requirements, making it a valuable tool for creating visually appealing and adaptive web designs.
- 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.insetInlineStart
Interactive Demo
Syntax
inset-inline-start: 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-lr;
position: relative;
inset-inline-start: 20px;
background-color: #c8c800;
}
Browser Support
The following table will show you the current browser support for the CSS inset-inline-start
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