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

La especificación de Propiedades y Valores Lógicos define asignaciones relativas al flujo para las diversas propiedades de margen, borde, relleno y sus abreviaturas. En esta guía echamos un vistazo a estos.

Si ha visto la página principal de Propiedades y Valores Lógicos de CSS, verá que hay una gran cantidad de propiedades en la lista. Esto se debe principalmente al hecho de que hay cuatro valores a largo plazo para cada margen, borde y lado de relleno, más todos los valores abreviados.

Asignaciones 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.

Propiedad Lógica Propiedad Física
border-block-end border-bottom
border-block-end-color border-bottom-color
border-block-end-style border-bottom-style
border-block-end-width border-bottom-width
border-block-start border-top
border-block-start-color border-top-color
border-block-start-style border-top-style
border-block-start-width border-top-width
border-inline-end border-right
border-inline-end-color border-right-color
border-inline-end-style border-right-style
border-inline-end-width border-right-width
border-inline-start border-left
border-inline-start-color border-left-color
border-inline-start-style border-left-style
border-inline-start-width border-left-width
border-start-start-radius border-top-left-radius
border-start-end-radius border-bottom-left-radius
border-end-start-radius border-top-right-radius
border-end-end-radius border-bottom-right-radius
margin-block-end margin-bottom
margin-block-start margin-top
margin-inline-end margin-right
margin-inline-start margin-left
padding-block-end padding-bottom
padding-block-start padding-top
padding-inline-end padding-right
padding-inline-start padding-left

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.

Propiedad Propósito
border-block Establece border-color, border-style, y border-width para ambos bordes de bloque.
border-block-color Establece border-color para ambos bordes de bloque.
border-block-style Establece border-style para ambos bordes de bloque.
border-block-width Establece border-width para ambos bordes de bloque.
border-inline Establece border-color, -style, y -width para ambos bordes en línea.
border-inline-color Establece border-color para ambos bordes en línea.
border-inline-style Establece border-style para ambos bordes en línea.
border-inline-width Establece border-width para ambos bordes en línea.
margin-block Establece todos los margins en bloque.
margin-inline Establece todos los margins en línea.
padding-block Establece padding en bloque.
padding-inline Establece el padding en línea.

Ejemplo para márgenes

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.

Abreviaciones para márgenes

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.

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

Nota: Las propiedades abreviadas margin-inline y margin-block se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.

Ejemplos para rellenos (Paddings)

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.

Abreviaciones para rellenos (paddings)

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:

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

Nota: Las abreviaciones de las propiedades padding-inline y padding-block se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.

Ejemplos para bordes

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.

Nuevas abreviaciones para bordes

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.

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

Nota: Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.

Flujo de propiedades relativas del border-radius

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.

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

Indicating logical values for the 4-value shorthand syntax

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.