DocHero
Lesson 84 +10 XP

Logical Properties

Logical Properties

Instead of physical "left/right/top/bottom", use flow-relative words: inline and block.

The idea

Physical: padding-left, margin-right, top...

Logical:

  • inline-start / inline-end = left/right in LTR.
  • block-start / block-end = top/bottom.

When your document flips (RTL), logical properties automatically mirror!

Common swaps

PhysicalLogical
margin-leftmargin-inline-start
margin-rightmargin-inline-end
margin-topmargin-block-start
padding-left/rightpadding-inline
padding-top/bottompadding-block
border-leftborder-inline-start
widthinline-size
heightblock-size
left/rightinset-inline-start/end

Example

.card {
  padding-inline: 16px;       /* left+right padding */
  padding-block: 24px;       /* top+bottom padding */
  margin-inline: auto;       /* auto centering, both */
}

Shorthands

inset, inset-inline, inset-block, margin-inline, padding-block.

TL;DR

  • inline maps to horizontal (LTR), block maps vertical.
  • They auto-flip for RTL = easier i18n.
  • margin-inline: auto centers horizontally so precisely.
  • Great practice for international-ready designs.