📍 CSS inset — Complete Tutorial

🌐 What Is inset?

The inset property is a powerful shorthand for setting an element’s top, right, bottom, and left offsets in a single declaration. It works on any element with a positioned context:

  • position: absolute
  • position: fixed
  • position: relative
  • position: sticky
>>“Think of inset as margin for positioned elements — a fast way to define all offsets at once.”

Note

✔ Equivalent to setting top, right, bottom, left
✔ Supports 1, 2, 3, or 4 values (like margin/padding)
✔ Logical alternative: inset-inline + inset-block

📦 Syntax

Inset syntax

inset: <length> | <percentage> | auto;

/* Shorthand */
inset: <top> <right> <bottom> <left>;

📌 1-Value Syntax (Applies to All Sides)

One-value inset

.box {
  position: absolute;
  inset: 20px;
}

Equivalent to:top: 20px; right: 20px; bottom: 20px; left: 20px;

📌 2-Value Syntax (Vertical | Horizontal)

Two-value inset

.box {
  position: absolute;
  inset: 10px 30px;
}

Equivalent to:

  • top & bottom = 10px
  • left & right = 30px

📌 3-Value Syntax

Three-value inset

.box {
  position: absolute;
  inset: 10px 20px 40px;
}

Equivalent to:

  • top = 10px
  • left & right = 20px
  • bottom = 40px

📌 4-Value Syntax (top | right | bottom | left)

Four-value inset

.box {
  position: absolute;
  inset: 5px 15px 25px 35px;
}

Equivalent to setting each side individually.

📌 5. Using auto in Inset

Inset auto

.center-box {
  position: absolute;
  inset: 0 auto;
}

auto helps center elements when combined with width/height.

📌 6. Center an Element With inset

Center using inset

.center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

This is one of the cleanest ways to center a fixed-size element.

📌 7. Fullscreen Element Using inset: 0

Fullscreen

.fullscreen {
  position: fixed;
  inset: 0;
}

Same as:top: 0; right: 0; bottom: 0; left: 0;

📌 8. Using Percentages

Percentage offsets

.panel {
  position: absolute;
  inset: 10% 5%;
}

Useful for responsive positioned elements.

📌 9. Comparison: Inset vs Logical Inset

PropertyControls
insettop, right, bottom, left
inset-inlineleft/right (LTR) or right/left (RTL)
inset-blocktop/bottom

Note

Use inset for fixed physical positioning. Use inset-inline & inset-block for RTL + writing-mode support.

🧪 Real-World Use Cases

1️⃣ Tooltip Positioned Easily

Tooltip example

.tooltip {
  position: absolute;
  inset: auto 0 100% 0;
}

2️⃣ Modal Centering

Centered modal

.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 400px;
  height: 300px;
}

3️⃣ Sticky Header With Custom Bottom Offset

Sticky header

header {
  position: sticky;
  inset-block-start: 0; /* same as top: 0 */
}

⚠️ Common Mistakes

  • ❌ Using inset on non-positioned elements
  • ❌ Mixing inset with top/right/bottom/left → overrides occur
  • ❌ Forgetting that auto behaves differently depending on width/height constraints

Note

The inset shorthand is powerful, but be consistent with either physical or logical positioning—not both.

🔥 Summary

The inset property simplifies positioned element layout by replacing four properties—top, right,bottom, left—with one shorthand. It is clean, readable, and great for responsive + centered layouts.

>>“One property to position them all — inset makes CSS layouts cleaner and smarter.”

Learn more →MDN Docs 📘