HTML & CSS
/Advanced
Logical Properties
Definition
CSS properties that control layout through logical, rather than physical, direction and dimension mappings (e.g., `margin-inline-start` instead of `margin-left`).
Explain Like I'm New
In English, text flows from Left-to-Right. So `margin-left: 20px` pushes an icon away from the start of the text. But in Arabic, text flows Right-to-Left! `margin-left` breaks the layout. Logical properties say `margin-inline-start`. In English, 'start' means left. In Arabic, 'start' magically means right. Your CSS automatically adapts to the language!
Real World Example
Building international websites. Instead of writing two entire CSS files (one for English, one for Arabic), you write one CSS file using Logical Properties.
Common Use Cases
- •Internationalization (i18n)
- •Right-to-Left (RTL) language support
Interactive Example
Interview Questions
basic
- What is the logical property equivalent of `margin-left` (in an English document)?
intermediate
- What do 'inline' and 'block' refer to in logical properties?