📦 CSS padding-inline & padding-block — Complete Tutorial

🌐 What Are padding-inline & padding-block?

padding-inline andpadding-block are **logical padding properties** that adapt to writing mode, text direction (LTR/RTL), and vertical text flow. Instead of using physical sides like padding-left or padding-top, these properties use **logical directions**:

  • 📝 inline axis → text direction (left ↔ right OR top ↔ bottom)
  • 📏 block axis → line stacking direction (vertical spacing)
>>“Logical properties allow your UI to work automatically in English, Arabic, Japanese, and vertical writing modes — without rewriting CSS.”

Note

✔ Writing-mode aware
✔ RTL-friendly
✔ Future-proof for international layouts

📦 Syntax

Logical padding syntax

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

padding-inline-start: <size>;
padding-inline-end: <size>;

padding-block-start: <size>;
padding-block-end: <size>;

📌 Understanding Logical Directions

Logical SideEquivalent (LTR)Equivalent (RTL)
inline-startleftright
inline-endrightleft
block-starttoptop
block-endbottombottom

📌 1. Basic Example: Padding on Inline Axis

padding-inline example

.box {
  padding-inline: 20px; /* start & end */
}

Equivalent to:
padding-left: 20px; padding-right: 20px; in LTR
Automatically flips in RTL.

📌 2. Different Padding for Start & End

padding-inline start & end

.box {
  padding-inline: 10px 30px; /* start end */
}

📌 3. Padding on Block Axis (Top & Bottom)

padding-block example

.container {
  padding-block: 16px; /* top & bottom */
}

Equivalent to:
padding-top: 16px; padding-bottom: 16px;

📌 4. Different Padding for Block Start & End

padding-block example

.container {
  padding-block: 8px 40px; /* block-start block-end */
}

📌 5. Combining Inline & Block Padding

Combined padding

.card {
  padding-inline: 20px;
  padding-block: 15px;
}

Clean, modern spacing for components that support all writing modes.

📌 6. RTL Language Support Example

RTL friendly

.content {
  direction: rtl;
  padding-inline: 1.5rem;
}

In RTL, padding applies automatically to the right & left correctly — no separate RTL stylesheet needed!

📌 7. Vertical Writing Mode Example (Japanese Layout)

Vertical writing mode

.poem {
  writing-mode: vertical-rl;
  padding-inline: 20px; /* now top & bottom */
  padding-block: 10px;  /* now left & right */
}

Logical properties adapt automatically — no need to rethink spacing.

🧪 Real-World Use Cases

1️⃣ Universal Components (Cards, Buttons, etc.)

Universal component spacing

.button {
  padding-inline: 1rem;
  padding-block: 0.5rem;
}

2️⃣ Navigation Menus That Support RTL

RTL navigation

.nav-item {
  padding-inline: 12px;
}

3️⃣ Responsive Article Layout

Article example

.article {
  padding-block: 2rem;
  padding-inline: 1rem;
}

⚠️ Common Mistakes

  • ❌ Mixing physical and logical padding (causes conflicts)
  • ❌ Forgetting logical padding changes meaning when writing mode changes
  • ❌ Using inline/block padding when fixed left/right is needed for a design

Note

Use logical padding when layouts must support RTL, vertical writing, or internationalization. Use physical padding for static, fixed-direction designs.

🔥 Summary

padding-inline andpadding-block provide modern, writing-mode–aware spacing that adapts to language direction and layout flow. They simplify UI development and make your CSS globally compatible.

>>“To future-proof your layouts, think in logical directions — not physical sides.”

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