HuntExams Academy
HTML/CSSAdvanced#css#internationalization

How do CSS logical properties (like margin-inline, padding-block) differ from physical properties?

Logical properties (margin-inline-start, padding-block, inset-inline) adapt automatically to the writing mode and text direction (LTR/RTL), whereas physical properties (margin-left, top) always refer to fixed screen directions, which breaks in RTL languages without overrides.

Example
.card {
  margin-inline: auto;      /* replaces margin-left/right in LTR */
  padding-block: 1rem;      /* replaces padding-top/bottom */
}
[dir="rtl"] .card { /* logical properties auto-flip, no override needed */ }

Related Questions

1
HTML/CSSIntermediate#css#functions

How does the CSS calc() function work?

Open
2
HTML/CSSAdvanced#css#functions

What is the difference between min(), max(), and clamp() in CSS?

Open
3
HTML/CSSBeginner#css#overflow

What is the difference between overflow: visible, hidden, scroll, and auto?

Open