Las propiedades lógicas describen el diseño en términos de la dirección del flujo del contenido (inicio/fin, inline/bloque) en lugar de direcciones físicas (izquierda/derecha/arriba/abajo). Esto permite que una sola hoja de estilos se adapte automáticamente a idiomas escritos de derecha a izquierda (árabe, hebreo) o de arriba a abajo.
{ : ; : ; : 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 */
Con propiedades físicas, admitir árabe significa escribir un conjunto completo de estilos reflejados (margin-left → margin-right, etc.) detrás de [dir="rtl"]. Con propiedades lógicas, el mismo CSS simplemente funciona — establece dir="rtl" en html y margin-inline-start se voltea automáticamente al lado derecho:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Las propiedades lógicas también manejan modos de escritura vertical (p. ej., algunos tipos de composición de Asia Oriental) y hacen que margin-inline: auto sea una forma limpia de centrar independientemente de la dirección.
Para cualquier producto que se lance en varios idiomas, las propiedades lógicas eliminan la necesidad de mantener hojas de estilos RTL reflejadas — un conjunto de reglas se adapta a la dirección de escritura.
Incluso para sitios solo LTR, son un modelo mental más limpio (inicio/fin, inline/bloque) y cada vez más se recomiendan como estándar en CSS moderno.