Logical properties follow writing mode and direction. They reduce assumptions that inline-start always means left.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: Margin-inline-start adapts spacing for right-to-left content without separate left-right rules. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Describe directional meaning
Choose inline-start spacing when the margin belongs before text flow rather than permanently on the left.
Step 2: Use logical declarations
Replace direction-dependent physical properties where appropriate while retaining intentionally physical positioning.
Step 3: Test writing direction
Render both left-to-right and right-to-left content and inspect overflow, icons and mixed-direction text.
Worked scenario
Margin-inline-start adapts spacing for right-to-left content without separate left-right rules.
.sidebar { padding-inline: 1rem; border-inline-end: 1px solid; }
.icon { margin-inline-end: .5rem; }The icon’s trailing space follows inline direction. A physical left property added elsewhere can conflict with this intent, so review the complete rule set instead of mechanically replacing isolated names.
Common mistake
Mixing physical and logical properties can create conflicting behavior.
Verify the behavior
Toggle dir between ltr and rtl. Check border placement, icon gaps and horizontal scrolling with long mixed-direction content.
Interview exercise
Make a sidebar adaptable.
Answer and reasoning
Use logical dimensions and spacing where semantics are directional, then test both text directions and overflow.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.