📍 CSS inset-inline & inset-block — Complete Tutorial

🌐 What Are inset-inline & inset-block?

inset-inline and inset-block are **logical positioning properties** in CSS. They allow you to position elements based on **writing mode** and **direction** rather than physical edges like left, right, top, or bottom.

They are logical equivalents of:

  • inset-inline → left + right
  • inset-block → top + bottom
>>“Logical inset properties make your layouts automatically adapt to RTL, LTR, and vertical writing systems.”

Note

✔ Works with position: relative | absolute | fixed | sticky
✔ Great for internationalization
✔ Avoid mixing with left/right/top/bottom for clarity

📦 Syntax

Inset logical syntax

inset-inline: <start> <end>;
inset-inline-start: <length | auto>;
inset-inline-end: <length | auto>;

inset-block: <start> <end>;
inset-block-start: <length | auto>;
inset-block-end: <length | auto>;

📌 Understanding Logical Directions

Logical SideLTR EquivalentRTL Equivalent
inline-startleftright
inline-endrightleft
block-starttoptop
block-endbottombottom

📌 1. Basic Example: Position Element on Inline Axis

inset-inline example

.box {
  position: absolute;
  inset-inline: 20px; /* start & end */
}

Equivalent to:
LTR → left: 20px; right: 20px;
RTL → right: 20px; left: 20px;

📌 2. Different Start & End Inline Insets

inline start & end

.box {
  position: absolute;
  inset-inline: 10px 30px; /* start end */
}

📌 3. Block Axis Positioning (Top & Bottom)

inset-block example

.banner {
  position: absolute;
  inset-block: 15px; /* top & bottom */
}

Equivalent to:top: 15px; bottom: 15px;

📌 4. Different Block Start & End Positions

block start/end example

.banner {
  inset-block: 20px 40px; /* block-start block-end */
}

📌 5. Combine Inline & Block Insets (Shorthand)

Full inset logical

.element {
  position: absolute;
  inset-inline: 20px;
  inset-block: 10px;
}

Equivalent to:
LTR → left/right: 20px, top/bottom: 10px
RTL → left/right flip automatically!

📌 6. Vertical Writing Mode Example

Vertical layout example

.poem {
  writing-mode: vertical-rl;
  position: absolute;

  inset-inline: 5px; /* applies to top/bottom in vertical mode */
  inset-block: 10px; /* applies to left/right */
}

Logical positioning adapts automatically — no manual calculation needed.

🧪 Real-World Use Cases

1️⃣ RTL-Friendly Sidebar

Sidebar

.sidebar {
  position: fixed;
  inset-inline-start: 0; /* left in LTR, right in RTL */
  inset-block: 0;
  width: 250px;
}

Automatically places sidebar on the correct side depending on language.

2️⃣ Positioning a Notification Banner

Banner

.notification {
  position: fixed;
  inset-block-start: 20px;
  inset-inline-end: 20px;
}

Works universally across writing modes.

3️⃣ Centering an Element Using Logical Insets

Center element

.center-box {
  position: absolute;
  inset: 0;          /* shorthand for inline + block */
  margin: auto;      /* centers the element */
  width: 200px;
  height: 100px;
}

inset is the physical equivalent, whileinset-inline & inset-block give logical control.

⚠️ Common Mistakes

  • ❌ Mixing left/right with inset-inline → conflicts
  • ❌ Forgetting writing mode affects meaning of inline/block
  • ❌ Using inset logical properties on non-positioned elements

Note

Logical inset properties should be used consistently when building multilingual interfaces or vertical layouts.

🔥 Summary

inset-inline andinset-block provide powerful, writing-mode–aware positioning for modern CSS. They make your UI globally adaptable and replace the need for direction-specific properties like left, right, top, and bottom.

>>“Position elements the smart way — with logical inset properties that adapt everywhere.”

Learn more →MDN: inset-inline
MDN: inset-block 📘