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; }

Next lesson: Block and inline

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies