CSS · Layout and visual systems
What are CSS logical properties?
Short answer
Logical properties describe spacing and borders relative to the writing mode and direction, using inline and block axes. They replace physical left, right, top and bottom in direction-aware components.
Physical properties assume a left-to-right, horizontal writing mode. Logical properties use start and end along the inline and block axes, so the same component adapts when direction changes to right-to-left or writing mode changes to vertical.
.card {
margin-inline: auto;
padding-block: 1rem;
border-inline-start: 2px solid #2563eb;
inset-inline-start: 1rem;
}The mapping
- Inline axis follows the direction text flows; block axis is perpendicular
- margin-inline-start maps to the start edge, which may be left or right
- padding-block affects the top and bottom in horizontal writing modes
- border-inline-start and border-block-end replace physical side borders
- inset-inline-start and inset-block-start replace left and top in positioning
- direction and writing-mode determine how the mappings resolve
For internationalized products, logical properties reduce the need for separate right-to-left stylesheets. They are also useful for vertical writing modes, where top and bottom no longer correspond to the block axis.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between the inline and block axes?
- 2How do logical properties help with right-to-left layouts?
- 3What does margin-inline-start map to?
- 4When would you still use physical properties?
Say it in the interview
Logical properties describe layout relative to the writing mode instead of physical sides. Inline is the text flow direction and block is perpendicular, so margin-inline-start becomes the correct edge in both left-to-right and right-to-left layouts. I use them for components by default because they make internationalization and vertical writing modes easier. Physical properties still make sense when a design is intentionally tied to a screen edge.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.