The inset-inline-start property controls the offset of an element’s inline-start edge using logical CSS. In horizontal LTR pages, that usually means the left edge.
Logical edge.
Default value.
One side only.
Adapts direction.
Common use.
Shorthand pair.
The inset-inline-start property in CSS specifies the offset from the start of the inline axis of an element’s containing block. In left-to-right (LTR) writing mode, that is usually the left side; in right-to-left (RTL) writing mode, it is usually the right side.
This property is part of the Logical Properties and Values specification, which provides more adaptable ways to control layout, especially for internationalized websites.
Apply inset-inline-start on positioned elements when you need to offset or anchor the inline-start side only. Use it for side panels, labels, icons, or any UI pinned to the logical start of the inline axis.
Think of inset-inline-start as logical left in horizontal LTR writing mode. Pair it with inset-inline-end or use the inset-inline shorthand when you need both inline edges.
The syntax for the inset-inline-start property accepts a single value:
element {
inset-inline-start: value;
}.box {
position: absolute;
inset-inline-start: 20px;
inset-block-start: 10px;
inline-size: 100px;
}The default value of the inset-inline-start property is auto, which means the browser determines the inline-start offset from other positioning rules.
inset-inline shorthand.position is not static.auto values.left.| Question | Answer |
|---|---|
| Initial value | auto |
| Applies to | Positioned elements |
| Inherited | No |
| Animatable | Yes, as a length |
| Horizontal LTR writing mode | Behaves like left |
| 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-start offset automatically. |
Logical inset properties follow the document’s direction instead of fixed physical sides:
dir="ltr") — inline-start is usually the physical left edge.dir="rtl") — inline-start moves to the opposite side, but the same CSS rule still works.inset-inline-end controls the opposite inline edge; inset-inline sets both in one rule.Use inset-inline-start alone when only the inline-start edge needs a fixed offset. Use inset-inline when both inline-start and inline-end should be set together.
An absolutely positioned box with inset-inline-start: 20px in horizontal LTR writing mode:
Offset from the inline-start edge, anchor a side panel, stretch with inline-end, and see behavior in RTL direction.
Start with a fixed inline-start offset and anchor UI to the logical start of the container.
Place a box 20px from the inline-start edge of a positioned container.
.box {
position: absolute;
inset-inline-start: 20px;
inset-block-start: 1rem;
inline-size: 100px;
}In horizontal LTR writing mode, the box sits 20px from the left edge of its containing block.
Pin a side panel flush to the inline-start edge with inset-inline-start: 0.
.side-panel {
position: absolute;
inset-inline-start: 0;
inset-block: 0;
inline-size: 3.5rem;
}inset-inline-start: 0 anchors the element to the inline-start edge, which is a common pattern for left rails and navigation drawers in LTR layouts.
Combine inline-start and inline-end offsets, then test logical behavior in right-to-left direction.
Set both inline edges to stretch a bar along the inline axis.
.bar {
position: absolute;
inset-inline-start: 1rem;
inset-inline-end: 1rem;
inset-block-start: 1.5rem;
block-size: 2.5rem;
}When both inline edges are set, the element stretches between them. This is equivalent to inset-inline: 1rem.
See how inset-inline-start still controls the inline-start edge when text direction is right-to-left.
html {
direction: rtl;
}
.box {
position: absolute;
inset-inline-start: 16px;
}Logical properties follow the inline axis, not fixed left 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-start WorksLTR or RTL text flow determines which physical direction inline-start maps to.
You specify the distance from the containing block’s inline-start edge to the element’s inline-start edge.
The box is positioned along the inline axis while other inset values remain at their defaults.
Panels, icons, and labels stay on the correct logical edge when text direction changes.
The inset-inline-start property is supported in modern browsers including Chrome 87+, Firefox 63+, Safari 14.1+, and Edge 87+.
All major browsers support inset-inline-start as part of the CSS Logical Properties module.
Bottom line: Safe for modern logical layouts. Use physical left only when legacy support is required.
The inset-inline-start property provides a logical and flexible way to control positioning relative to the start of the inline axis. It is especially useful in responsive and internationalized websites, because it adapts to different text directions without rewriting your CSS.
For beginners, start with horizontal LTR pages where it behaves like left, then explore RTL direction to see the real advantage of logical CSS.
inset-inline-end when stretching along the inline axisposition value firstinset-inline-startUse these points when anchoring elements to the logical inline-start edge.
Logical edge.
PurposeBrowser pick.
DefaultOne side.
SyntaxAdapts axis.
PatternShorthand.
FamilyOpen the HTML editor, set inset-inline-start on positioned elements, and compare LTR versus RTL direction.
5 people found this page helpful