Inset property
Learn positioning with inset.
What is the inset property?
inset is a logical shorthand for the offsets of a positioned element on its four edges. On a position: absolute or fixed element, it stands in for top, right, bottom, left.
inset: 0 zeroes all four edges; the element fills its container. inset: 1rem 2rem places it 1rem from top and bottom, 2rem from left and right.
inset-inline and inset-block
inset-inline sets both edges on the inline axis; inset-block does the same on the block axis. inset-inline-start is the start edge, inset-inline-end is the end edge.
When the page is direction: rtl, inset-inline-start automatically becomes the right edge. The physical left does not change; that is why logical declarations work on both directions.
Where does inset shine?
inset is especially handy on fixed and sticky elements. For a banner pinned to the top, position: sticky; inset-block-start: 0 is enough.
For a full-screen overlay, position: fixed; inset: 0 is the shortest path. Logical versions still hit the right edge when direction changes; that is why modern design prefers them.
Exercise Sticky banner on top
Write these declarations on the .banner selector: position: sticky, inset-block-start: 0 and background: teal. All three must sit in the same block.
Show example solution
/* sticky banner on top */
.banner {
position: sticky;
inset-block-start: 0;
background: teal;
}Test yourself
-
What does inset: 0 do?
- Resets all four edges
- Resets only the top edge
- Resets left and right edges
- Resets only the bottom edge
Show answer
Resets all four edges — Correct. inset: 0 zeroes all four edges.
-
Block start offset
.banner { position: sticky; ____: 0; }Show answer
.banner { position: sticky; inset-block-start: 0; }