Propiedades lógicas para márgenes, bordes y rellenos

La especificación detalla la asignación para cada valor lógico con una contraparte física. En la tabla de abajo he dado estos valores asignados asumiendo que el modo de escritura (writing-mode) en uso es horizontal-tb — con una dirección de izquierda a derecha. La dirección en línea por lo tanto va horizontalmente — izquierda a derecha — y margin-inline-start debería ser quivalente a margin-left.

Si usaste el modo de escritura horizontal-tb con una dirección del texto de derecha a izquierda, entonces margin-inline-start debería ser el mismo que margin-right, y en un modo de escritura vertical esto debería ser el mismo que usar margin-top.

Hay también algunas abreviaciones que han sido posibles porque tenemos la capacidad de apuntar ambos bloques o ambos bordes en línea de la caja simultáneamente. Estas abreviaciones no tienen equivalente físico.

Las propiedades asignadas para márgenes de margin-inline-start, margin-inline-end, margin-block-start, y margin-inline-end pueden ser usadas en lugar de sus contrapartes físicas.

En el siguiente ejemplo, crearemos dos cajas y agregaremos diferentes tamaños de márgenes a cada borde. Hemos agregado un contenedor con un borde para poder hacer el márgen más notorio.

Una caja usa propiedades físicas y la otra usa propiedades lógicas. Intenta cambiar la propiedad direction a rtl para hacer que los cuadros se muestren en dirección de derecha a izquierda, los márgenes del primer cuadro permanecerán en el mismo lugar, mientras que los márgenes en la dimensión en línea del segundo cuadro cambiarán.

También puedes intentar cambiar el modo de escritura (writing-mode) de horizontal-tb a vertical-rl. De nuevo, notarás cómo las márgenes permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.

Como ahora podemos apuntar a ambos lados de la caja — ya sea ambos lados en bloque o ambos lados en línea either — hay nuevas abreviaciones disponibles, margin-inline y margin-block, que aceptan dos valores. El primer valor se aplicará al comienzo de esta dimensión y la segunda al final. Si tú solo usas un valor, se aplica para ambos.

En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba de la caja y un margen de 10px abajo.

.box {
  margin-block: 5px 10px;
}

Las propiedades asignadas para rellenos de padding-inline-start, padding-inline-end, padding-block-start, y padding-inline-end pueden ser usadas en lugar de sus contrapartes físicas.

En el siguiente ejemplo tenemos dos cajas, una de ellas está usando propiedades de relleno físico y la otra propiedades de relleno lógico. Con un modo de escritura (writing-mode) de horizontal-tb, en ambas cajas aparecerán lo mismo.

Intenta cambiar la propiedad direction a rtl para hacer que las cajas se muestren en dirección de derecha a izquierda, los rellenos del primer cuadro permanecerán en el mismo lugar, mientras que los rellenos en la dimensión en línea del segundo cuadro cambiarán.

También puedes intentar cambiar el modo de escritura (writing-mode) de horizontal-tb a vertical-rl. De nuevo, notarás cómo los rellenos permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.

Como con las márgenes, hay dos abreviaciones para rellenos — padding-inline y padding-block — que permiten configurar el relleno a las dimenciones de bloque y en línea, respectivamente.

En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba de la caja y un relleno de 10px abajo:

.box {
  padding-block: 5px 10px;
}

Las propiedades del borde son la razón principal por la que las propiedades y valores lógicos parecen tener tantas propiedades, ya que tenemos longhands para el color, el ancho y el estilo del borde en cada lado de una caja, junto con las abreviaciones para establecer los tres a la vez por cada lado. Al igual que con el margen y el relleno, tenemos una versión asignada de cada propiedad física.

El siguiente demo usa algunas longhands y tres valores de abreviaciones. Como con los otros demos, intenta cambiar la propiedad direction a rtl para que las cajas se muestren en dirección de derecha a izquierda, o cambia el modo de escritura (writing-mode) de horizontal-tb a vertical-rl.

Hay valores abreviados de dos valores para establecer el ancho, el estilo y el color del bloque o dimensión en línea, y valores abreviados de dos valores para establecer los tres valores en la dimensión de bloque o enlínea. El siguiente código, en un modo de escritura horizontal, le dará un borde sólido verde de 2px en la parte superior e inferior del cuadro, y un borde púrpura de puntos de 4px a la izquierda y la derecha.

.box {
  border-block: 2px solid green;
  border-inline-width: 4px;
  border-inline-style: dotted;
  border-inline-color: rebeccapurple;
}

La especificación ha agregado recientemente valores relativos al flujo para las longitudes border-radius. Estos aún no han sido implementados por ningún navegador. El siguiente ejemplo, en un modo de escritura horizontal, establecería el radio del borde superior derecho en 1em, la parte inferior derecha a 0, la parte inferior izquierda a 20px y la parte superior izquierda a 40px.

.box {
  border-end-start-radius: 1em;
  border-end-end-radius: 0;
  border-start-end-radius: 20px;
  border-start-start-radius: 40px;
}

La especificación hace una sugerencia para los métodos abreviados de cuatro valores, como la propiedad de margin, sin embargo, la decisión final sobre cómo debe indicarse esto aún no se ha resuelto, y se trata en este issue.

El uso de una abreviatura de cuatro valores, como el margen, el relleno o el borde, utilizará actualmente las versiones físicas, por lo que si es importante seguir el flujo del documento, use las propiedades longhand por el momento.