The inset-block-start property controls the offset of an element’s block-start edge using logical CSS. In horizontal English pages, that usually means the top edge.
Logical edge.
Default value.
One side only.
Adapts axis.
Common use.
Shorthand pair.
The inset-block-start property in CSS is part of the Logical Properties and Values module. It defines the logical block-start offset of an element, which corresponds to the start of the block direction in the document’s writing mode.
This property is especially useful for internationalization and responsive design, because it adapts to different writing modes such as left-to-right, right-to-left, and vertical text layouts.
Apply inset-block-start on positioned elements when you need to offset or anchor the block-start side only. Use it to pin headers, badges, labels, or any UI element to the logical start of the block axis.
Think of inset-block-start as logical top in horizontal writing mode. Pair it with inset-block-end or use the inset-block shorthand when you need both block edges.
The syntax for the inset-block-start property accepts a single value:
element {
inset-block-start: value;
}.box {
position: absolute;
inset-block-start: 20px;
inset-inline-start: 30px;
inline-size: 100px;
}The default value of the inset-block-start property is auto, which means the browser determines the block-start offset from other positioning rules.
inset-block shorthand.position is not static.auto values.top.| Question | Answer |
|---|---|
| Initial value | auto |
| Applies to | Positioned elements |
| Inherited | No |
| Animatable | Yes, as a length |
| Horizontal writing mode | Behaves like top |
| Value | Description |
|---|---|
| length | A fixed offset such as 20px, 1em, or 1rem. |
| percentage | An offset relative to the containing block size on the block axis. |
auto | Lets the browser calculate the block-start offset automatically. |
Logical inset properties follow the document’s writing mode instead of fixed physical directions:
writing-mode: horizontal-tb) — block-start is usually the physical top edge.writing-mode: vertical-rl) — block-start follows the rotated block axis, not necessarily the top of the screen.inset-block-end controls the opposite block edge; inset-block sets both in one rule.Use inset-block-start alone when only the block-start edge needs a fixed offset. Use inset-block when both block-start and block-end should be set together.
An absolutely positioned box with inset-block-start: 20px in horizontal writing mode:
Offset from the block-start edge, anchor a header bar, stretch with block-end, and see behavior in vertical writing mode.
Start with a fixed block-start offset and anchor UI to the logical start of the container.
Place a box 20px from the block-start edge of a positioned container.
.box {
position: absolute;
inset-block-start: 20px;
inset-inline-start: 1rem;
inline-size: 100px;
}In horizontal writing mode, the box sits 20px below the top of its containing block.
Pin a header bar flush to the block-start edge with inset-block-start: 0.
.header-bar {
position: absolute;
inset-inline: 0;
inset-block-start: 0;
block-size: 2.5rem;
}inset-block-start: 0 anchors the element to the block-start edge, which is a common pattern for card headers and sticky top bars.
Combine block-start and block-end offsets, then test logical behavior in vertical writing mode.
Set both block edges to stretch a panel along the block axis.
.panel {
position: absolute;
inset-inline-start: 1rem;
inset-block-start: 1rem;
inset-block-end: 1rem;
inline-size: 5rem;
}When both block edges are set, the element stretches between them. This is equivalent to inset-block: 1rem.
See how inset-block-start still controls the block-start edge when text flows vertically.
.container {
writing-mode: vertical-rl;
position: relative;
}
.box {
position: absolute;
inset-block-start: 16px;
}Logical properties follow the block axis, not fixed top directions, so the same rule works across writing modes.
inset-block-start WorksHorizontal or vertical text flow determines which physical direction block-start maps to.
You specify the distance from the containing block’s block-start edge to the element’s block-start edge.
The box is positioned along the block axis while other inset values remain at their defaults.
Headers, badges, and labels stay on the correct logical edge when writing mode changes.
The inset-block-start property is supported in modern browsers including Chrome 87+, Firefox 63+, Safari 14.1+, and Edge 87+.
All major browsers support inset-block-start as part of the CSS Logical Properties module.
Bottom line: Safe for modern logical layouts. Use physical top only when legacy support is required.
The inset-block-start property is a powerful tool for web developers who want layouts that adapt to different writing modes and responsive designs. By using logical properties like this one, you can keep positioning consistent and flexible across languages and screen sizes.
For beginners, start with horizontal pages where it behaves like top, then explore vertical writing modes to see the real advantage of logical CSS.
inset-block-end when stretching along the block axisposition value firstinset-block-startUse these points when anchoring elements to the logical block-start edge.
Logical edge.
PurposeBrowser pick.
DefaultOne side.
SyntaxAdapts axis.
PatternShorthand.
FamilyOpen the HTML editor, set inset-block-start on positioned elements, and compare horizontal versus vertical writing modes.
5 people found this page helpful