What is the difference between logical properties (inline/block) and physical properties in CSS?
Understand CSS logical properties like inline-size and margin-inline-start versus physical ones, and how they enable automatic RTL and i18n support.
Expected Interview Answer
Physical properties (like margin-left, padding-top, width) reference fixed screen directions, while logical properties (like margin-inline-start, padding-block-start, inline-size) reference directions relative to the writing mode and text direction, so they automatically adapt to left-to-right, right-to-left, and vertical languages.
Logical properties map to two axes: the inline axis follows the direction text flows (horizontal in English, vertical in Japanese vertical mode) and the block axis is the direction lines stack. So inline-size replaces width, block-size replaces height, and margin-inline-start replaces margin-left in LTR but becomes margin-right in RTL. This lets one stylesheet mirror correctly for internationalization without duplicated RTL overrides, and shorthands like margin-inline and padding-block set both ends of an axis at once.
- Automatic RTL and vertical-writing support without overrides
- One stylesheet works across many languages
- Cleaner shorthands like margin-inline and inset-block
- Less duplicated CSS for internationalized sites
- Future-proof, direction-agnostic layout code
AI Mentor Explanation
Physical properties are like saying 'the fielder at the north end of the ground' — fixed to the compass no matter who bats. Logical properties are 'the fielder behind the striker' — defined relative to which end the batter faces, so when the players switch ends the position updates itself. One is tied to the map, the other to the play.
Step-by-Step Explanation
Step 1
Learn the two axes
Inline axis follows text flow direction; block axis is the direction lines stack. In English, inline is horizontal, block is vertical.
Step 2
Map sizes
Replace width with inline-size and height with block-size so dimensions follow the writing mode.
Step 3
Map box edges
Use margin-inline-start/end, margin-block-start/end and the padding/border equivalents instead of left/right/top/bottom.
Step 4
Use axis shorthands
margin-inline sets both inline ends, padding-block sets both block ends, and inset-inline positions along the inline axis.
Step 5
Test with dir and writing-mode
Switch dir="rtl" or writing-mode: vertical-rl to confirm the layout mirrors automatically with no extra overrides.
What Interviewer Expects
- Definition of inline axis vs block axis
- Examples like inline-size for width, margin-block-start for margin-top
- Why logical properties help with RTL and internationalization
- How they eliminate duplicated direction-specific overrides
- Awareness of shorthands (margin-inline, padding-block, inset-*)
Common Mistakes
- Thinking inline always means horizontal (it depends on writing mode)
- Assuming margin-inline-start is always margin-left (it flips in RTL)
- Mixing physical and logical properties and causing conflicts
- Confusing block-size with something other than height in LTR
- Believing logical properties lack browser support (they are widely supported)
Best Answer (HR Friendly)
“Physical CSS properties use fixed directions like left, right, top and bottom, while logical properties use directions relative to the text flow, like start and end. That means logical properties automatically adjust for languages that read right-to-left or top-to-bottom without rewriting the styles.”
Code Example
/* Physical: hard-coded to screen directions */
.card-physical {
width: 300px;
height: 200px;
margin-left: 16px;
padding-top: 8px;
}
/* Logical: adapts to writing mode and direction */
.card-logical {
inline-size: 300px;
block-size: 200px;
margin-inline-start: 16px; /* becomes margin-right in RTL */
padding-block-start: 8px;
}
/* Axis shorthands */
.spaced {
margin-inline: auto; /* both inline ends */
padding-block: 12px; /* both block ends */
}Follow-up Questions
- How does writing-mode change what the inline and block axes mean?
- What does margin-inline-start become in a right-to-left layout?
- Which logical properties replace width and height?
- How do inset-inline and inset-block relate to top/right/bottom/left?
- When might you still need physical properties?
MCQ Practice
1. Which logical property replaces width?
inline-size maps to the inline axis, which is horizontal in English, so it replaces width; block-size replaces height.
2. In an RTL layout, margin-inline-start corresponds to which physical property?
The inline start is the side text begins on; in RTL that is the right, so margin-inline-start becomes margin-right.
3. What is the main advantage of logical properties?
Their key benefit is direction-agnostic layout that mirrors correctly for RTL and vertical writing without overrides.
Flash Cards
Inline axis vs block axis — Inline follows text flow (horizontal in English); block is the direction lines stack (vertical in English).
Logical size properties — inline-size replaces width; block-size replaces height.
margin-inline-start in RTL — It becomes margin-right, because the inline start flips to the right side in right-to-left text.
Why use logical properties? — One stylesheet mirrors correctly for RTL and vertical languages without duplicated overrides.
Handy axis shorthands — margin-inline / padding-block set both ends of an axis; inset-inline / inset-block position along an axis.
Continue Learning
Related Interview Questions
What is the difference between em, rem, px, and percentage units in CSS?
easy
What is the difference between Flexbox and CSS Grid, and when should you use each?
medium
What is the difference between position relative, absolute, fixed, and sticky in CSS?
medium
How does the CSS overflow property control scrolling and clipping?
medium