📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials CSS Mastery CSS Logical Properties

CSS Logical Properties

4 min read
Logical properties adapt to text direction. Use margin-inline instead of margin-left/right and padding-block instead of padding-top/bottom. Essential for supporting RTL languages like Arabic and Hebrew alongside LTR.

Logical Properties (RTL-friendly)

/* Traditional */
margin-left:  16px;   /* physical */

/* Logical (works in RTL languages too) */
margin-inline-start: 16px;  /* left in LTR, right in RTL */
margin-inline-end:   16px;
margin-block-start:  16px;  /* top (usually) */
margin-block-end:    16px;  /* bottom */

/* Shorthand */
margin-inline: 16px;  /* left & right */
margin-block:  8px;   /* top & bottom */

padding-inline: 24px;