inset-inline
inset-inline sets how far a positioned element (one whose position is not static) sits from the start and end of the direction text runs in (the inline direction). In horizontal writing, it is left and right.
Syntax
<'top'>{1,2}Preview
1234
Presets
Sample
Drag the bottom-right corner to resize
Code
.box {
display: flex;
position: relative;
}
.box > :nth-child(2) {
position: absolute;
inset-inline: auto 16px;
}Controls
inset-inline
Same value on both sides
inset-inline-startauto
inset-inline-end16px
1234
About
Writing the value
- One value applies to both sides. Two values apply to the start (inset-inline-start) and the end (inset-inline-end), in that order.
- It takes the same values as inset: lengths,
%,auto, and negative values. A % is a share of the containing block's size in that direction (its width in horizontal writing). The initial value isauto. - With one side set, the element is placed that far from that side. With both set and an
autowidth, it stretches between them. The item on this page has a set width, so with both set, the start value wins.
The preview makes the box position: relative with a helper declaration and writes position: absolute and inset-inline on the second item. It is horizontal, left to right, so the start is the left and the end is the right.
How the direction changes it
- With
direction: rtl, for languages written right to left, the start is the right and the end is the left. - In vertical writing such as
writing-mode: vertical-rl, the start is the top and the end is the bottom. - Which sides they are depends on the element's own writing-mode and direction, not on its containing block's.
When to use it
Placing a close button or a speech-bubble tail with inset-inline-end: 8px moves it to the left automatically in right-to-left languages.
Watch out
- It has no effect on elements whose
positionisstatic. - In horizontal writing, it refers to the same sides as left and right. When an element has both, the one written later wins.
- Works in all major browsers.