📐 CSS margin-inline & margin-block — Complete Tutorial

🌐 What Are margin-inline & margin-block?

These properties allow you to set margins based on the **writing mode** rather than physical directions (left, right, top, bottom). They provide **logical margins** that adapt automatically to:

  • 🌍 Different languages (LTR, RTL)
  • ↕ Vertical writing modes
  • 📱 Responsive and internationalized UI layouts
>>“Use logical properties to build layouts that work everywhere — no matter the language or direction.”

Note

✔ Replaces margin-left/right/top/bottom
✔ Writing-mode aware
✔ Essential for multilingual & vertical writing support

📦 Understanding Logical Directions

Instead of physical directions, logical properties use:

Logical SideDepends On
inline-startWhere text begins (left in LTR, right in RTL)
inline-endWhere text ends
block-startTop in horizontal writing
block-endBottom in horizontal writing

📦 Syntax

margin-inline & margin-block syntax

margin-inline: <start> <end>;
margin-block: <start> <end>;

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

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

📌 1. Using margin-inline

margin-inline example

.box {
  margin-inline: 20px; /* Applies to inline-start & inline-end */
}

Equivalent to:
margin-left: 20px; margin-right: 20px; in LTR
margin-right: 20px; margin-left: 20px; in RTL

📌 2. Different Inline Start and End Values

Start & end margins

.box {
  margin-inline: 10px 40px; /* start end */
}

📌 3. Using margin-block

margin-block example

.card {
  margin-block: 30px; /* top & bottom in horizontal writing */
}

Equivalent to:
margin-top: 30px; margin-bottom: 30px;

📌 4. Different Block Start/End Values

Start & end block margins

.card {
  margin-block: 15px 50px; /* block-start block-end */
}

📌 5. Example Using All Logical Margin Properties

Full logical layout example

.article {
  margin-inline-start: 20px;
  margin-inline-end: 40px;

  margin-block-start: 10px;
  margin-block-end: 30px;
}

📌 6. International-Friendly Layout

LTR + RTL support

.content {
  writing-mode: horizontal-tb; /* default */
  direction: rtl; /* Hebrew, Arabic */
  margin-inline: 2rem; /* auto flips! */
}

Using logical properties removes the need for separate RTL CSS files.

📌 7. Vertical Writing Mode Example

Vertical layout

.poem {
  writing-mode: vertical-rl;
  margin-inline: 20px; /* now top/bottom in vertical flow */
  margin-block: 10px;  /* now left/right depending on mode */
}

Inline and block directions adapt automatically.

🧪 Real-World Use Cases

1️⃣ Universal Card Component

Card spacing

.card {
  margin-block: 1.5rem;
  margin-inline: 1rem;
}

2️⃣ Blog Layout Supporting RTL

Blog example

.post {
  margin-inline-start: 2rem;
  margin-inline-end: 2rem;
}

3️⃣ Navigation Bar in RTL Languages

Navbar

.nav-item {
  margin-inline: 0.5rem;
}

⚠️ Common Mistakes

  • ❌ Mixing physical (left/right) & logical (inline/block) margins incorrectly
  • ❌ Expecting margin-inline to affect vertical spacing
  • ❌ Forgetting direction/writing-mode change layout behavior

Note

Logical properties make CSS **future-proof** and **multilingual friendly**, but use them consistently to avoid confusion.

🔥 Summary

margin-inline andmargin-block help you write layout code that adapts to languages, directions, and writing-modes automatically. They make your CSS cleaner, more scalable, and global-ready.

>>“Stop thinking left/right — start thinking inline/block for modern CSS layouts.”

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