Logical properties describe layout in terms of the content's flow direction (start/end, inline/block) instead of physical directions (left/right/top/bottom). This makes a single stylesheet adapt automatically to languages written right-to-left (Arabic, Hebrew) or top-to-bottom.
{ : ; : ; : left; : solid; }
{
: ;
: ;
: start;
: solid;
}
margin-inline: 1rem; /* left + right in LTR (both inline sides) */
margin-block: 2rem; /* top + bottom */
margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */
padding-block-end: 1rem; /* bottom in horizontal writing */
inset-inline-start: 0; /* logical version of left/right for positioning */
With physical properties, supporting Arabic means writing a whole second set of mirrored styles (margin-left → margin-right, etc.) behind [dir="rtl"]. With logical properties, the same CSS just works — set dir="rtl" on the html and margin-inline-start automatically flips to the right side:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Logical properties also handle vertical writing modes (e.g. some East Asian typesetting) and make margin-inline: auto a clean way to center regardless of direction.
For any product that ships in multiple languages, logical properties eliminate the need to maintain mirrored RTL stylesheets — one set of rules adapts to the writing direction.
Even for LTR-only sites they're a cleaner mental model (start/end, inline/block), and they're increasingly the recommended default in modern CSS.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate