Propiedades lógicas CSS

Una propiedad que margin-leftparece bastante lógica, pero como dice Manuel Rego Casasnovas:

Imagínese que tiene contenido de derecha a izquierda (RTL) en su sitio web; su izquierda probablemente sea la derecha física, por lo que si normalmente configura margin-left: 100pxalgunos elementos, es posible que desee reemplazarlo con margin-right: 100px.

La dirección, el modo de escritura e incluso flexbox tienen el poder de cambiar las cosas y hacer que las propiedades sean menos lógicas y más difíciles de mantener de lo que cabría esperar. Ahora tendremos margin-inline-starteso en cuenta. La lista completa es:

• margin-{block,inline}-{start,end}
• padding-{block,inline}-{start,end}
• border-{block,inline}-{start,end}-{width,style,color}

Manuel entra en todos los detalles de soporte del navegador.

Rachel Andrew también explica la lógica:

… estos valores se han alejado del supuesto subyacente de que el contenido de la web se corresponde con las dimensiones físicas de la pantalla, y que la primera palabra de una oración se encuentra en la parte superior izquierda del cuadro en el que se encuentra. El orden de las líneas en el área de la cuadrícula tiene todo el sentido si nunca se ha encontrado con la forma actual en que establecemos estos valores en una abreviatura.

Aquí se muestran las propiedades lógicas y cómo se asignan a las propiedades existentes en un orden predeterminado de izquierda a derecha sin que suceda nada más.