Una propiedad como margin-left parece bastante lógico, pero como dice Manuel Rego Casasnovas:
Imagine que tiene algún contenido de derecha a izquierda (RTL) en su sitio web, su izquierda podría ser probablemente la derecha física, por lo que si normalmente está configurando margin-left: 100px para algunos elementos, es posible que desee reemplazar eso con margin-right: 100px.
La dirección, el modo de escritura e incluso el 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 esperas. ahora tendremos margin-inline-start para eso. La lista completa es:
margin-{block,inline}-{start,end}padding-{block,inline}-{start,end}border-{block,inline}-{start,end}-{width,style,color}
Manuel se mete en todos los detalles de soporte del navegador.
Rachel Andrew también explica la lógica:
… estos valores se han alejado de la suposición subyacente de que el contenido en la web se asigna a las dimensiones físicas de la pantalla, con la primera palabra de una oración 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 hace completo sentido si nunca se ha encontrado con la forma existente en la que establecemos estos valores de forma abreviada.
Estas son las propiedades lógicas y cómo se asignan a las propiedades existentes de forma predeterminada de izquierda a derecha manera de que nada más suceda.
| Propiedad | Propiedad lógica |
|---|---|
margin-top |
margin-block-start |
margin-left |
margin-inline-start |
margin-right |
margin-inline-end |
margin-bottom |
margin-block-end |
| Propiedad | Propiedad lógica |
|---|---|
padding-top |
padding-block-start |
padding-left |
padding-inline-start |
padding-right |
padding-inline-end |
padding-bottom |
padding-block-end |
| Propiedad | Propiedad lógica |
|---|---|
border-top{-size|style|color} |
border-block-start{-size|style|color} |
border-left{-size|style|color} |
border-inline-start{-size|style|color} |
border-right{-size|style|color} |
border-inline-end{-size|style|color} |
border-bottom{-size|style|color} |
border-block-end{-size|style|color} |
| Propiedad | Propiedad lógica |
|---|---|
top |
inset-block-start |
left |
inset-inline-start |
right |
inset-inline-end |
bottom |
inset-block-end |
Enlace directo →