The inset-inline property sets offsets along the inline axis using logical CSS. It is the inline-axis counterpart to physical left and right properties.
Logical offset.
Default value.
Start & end.
Adapts direction.
Common use.
Related set.
The inset-inline property in CSS is a logical property that controls the inline-start and inline-end offsets of a positioned element in one declaration.
It is part of the CSS Logical Properties and Values module, which provides layout properties that work independently of physical directions and adapt to different writing modes and text directions.
Apply inset-inline on positioned elements when you want to offset them along the inline axis. In normal horizontal English pages, that usually means left and right offsets.
Think of inset-inline as logical left + right. Pair it with inset-block for full logical positioning.
The syntax for the inset-inline property accepts one or two values:
element {
inset-inline: value;
}
element {
inset-inline: inline-start inline-end;
}.box {
position: absolute;
inset-inline: 20px 40px;
block-size: 3rem;
}The default value of the inset-inline property is auto, which means the browser determines inline-axis placement from other positioning rules.
inset-inline-start and inset-inline-end.position is not static.auto values.left and right.| Question | Answer |
|---|---|
| Initial value | auto |
| Applies to | Positioned elements |
| Inherited | No |
| Animatable | Yes, as a length |
| Horizontal LTR writing mode | Behaves like left and right |
| Value | Description |
|---|---|
| length | A fixed offset such as 20px, 1em, or 1rem. |
| percentage | An offset relative to the containing block size on the inline axis. |
auto | Lets the browser calculate the inline offset automatically. |
Logical inset properties follow the document’s writing mode and direction instead of fixed physical sides:
dir="ltr") — inline axis is horizontal; inset-inline controls left and right offsets.dir="rtl") — inline-start and inline-end swap sides, but the same CSS rule still works.inset-block handles the block axis, and inset sets all four sides together.Use inset-inline + inset-block together for writing-mode-aware layouts, or inset when you want all offsets in one rule.
An absolutely positioned box with inset-inline: 10px 20px in horizontal LTR writing mode:
Set two inline offsets, stretch with inset-inline: 0, use a single value, and see behavior in RTL direction.
Start with separate inline-start and inline-end offsets on a positioned element.
Set inline-start to 20px and inline-end to 40px on an absolutely positioned box.
.box {
position: absolute;
inset-inline: 20px 40px;
block-size: 3rem;
}In horizontal LTR writing mode, the box sits 20px from the left and 40px from the right of its container.
Stretch an element fully along the inline axis inside a positioned container.
.banner {
position: absolute;
inset-inline: 0;
inset-block-start: 1rem;
block-size: 2.5rem;
}inset-inline: 0 pins both inline edges to the container, creating a full-width banner strip.
Use one value for equal offsets and test logical behavior in right-to-left direction.
Apply the same offset to both inline-start and inline-end with one value.
.box {
position: absolute;
inset-inline: 1rem;
inset-block: 1rem;
}One value applies to both inline edges. Combined with inset-block, you get even spacing on all logical sides.
See how inset-inline still controls inline-axis offsets when text direction is right-to-left.
html {
direction: rtl;
}
.box {
position: absolute;
inset-inline: 12px 36px;
}Logical properties follow the inline axis, not fixed left and right directions, so the same rule works in both LTR and RTL layouts.
dir on the document — Correct text direction helps both layout and assistive technology.inset-inline WorksLTR, RTL, or vertical writing mode determines which physical direction inline-start and inline-end map to.
One declaration controls both inline-start and inline-end distances for a positioned element.
The box is offset from the containing block along the inline axis.
Layouts adapt cleanly when text direction or writing mode changes.
The inset-inline property is supported in modern browsers including Chrome 87+, Firefox 63+, Safari 14.1+, and Edge 87+.
All major browsers support inset-inline as part of the CSS Logical Properties module.
Bottom line: Safe for modern logical layouts. Use physical left and right only when legacy support is required.
The inset-inline property is a valuable addition to CSS, providing flexible control over inline-axis positioning in different writing modes and text directions. It pairs naturally with inset-block and other logical properties for internationalized layouts.
For beginners, start with horizontal LTR pages where it behaves like left and right, then explore RTL direction to see the real advantage of logical CSS.
inline-sizeinset-block for full logical placementinset-inline: 0 for full inline-axis stretchposition value firstinset-inlineUse these points when building logical positioned layouts.
Logical offset.
PurposeBrowser pick.
DefaultShorthand.
SyntaxAdapts axis.
PatternLogical set.
FamilyOpen the HTML editor, combine inset-inline with logical sizing, and compare LTR versus RTL direction.
5 people found this page helpful