What is the difference between logical and physical properties?

Logical properties adapt layouts for different writing directions (LTR, RTL, vertical text).

Physical Logical

margin-le

ft

margin-inline-s

tart

padding-t

op

padding-block-s

tart

Example:

p {

padding-inline-start: 10px; /* Works for both LTR and RTL */

}

Key Takeaway:

Logical properties make designs multilingual and direction-aware.