Use CSS Logical Properties for Spacing/Positioning
Introduction
Use CSS logical properties (padding-inline, padding-block, margin-inline, margin-block, inset-inline, inset-block, etc.) instead of physical directional properties.
Decision
When writing spacing and positioning CSS, prefer logical properties over physical ones.
Context
Physical CSS properties (padding-left, margin-right, etc.) always refer to a fixed direction and don't adapt when content flows differently, such as in RTL languages like Arabic. Logical properties map to the document's writing flow instead — inline follows the text direction, block follows the content stacking direction — so they adapt automatically.
Consequences
- Unfamiliar syntax can slow down developers new to logical properties.
- Mixing logical and physical properties within a codebase can cause confusion.
Exceptions
- Existing files that already use physical properties that can't be easily refactored.
- Overriding third party libraries or modules that are using physical properties.