Propiedades y Valores Lógicos de CSS

CSS Logical Properties (las propiedades lógicas en CSS) son un módulo de CSS que introduce propiedades y valores lógicos, proporcionando la capacidad de controlar el diseño de forma lógica en vez de la asignación de dimensiones físicas de dirección y dimensión.

Este módulo también define propiedades y valores lógicos para propiedades previamente definidas en CSS 2.1. Las propiedades lógicas definen una equivalencia a sus propiedades físicas correspondientes.

Dimensiones de bloque y en línea

Las propiedades y valores lógicos usan los términos abstractos de bloque (block) y en línea (inline) para describir la dirección en la que fluyen. El sentido físico de estos términos depende del modo de escritura.

Dimensión de bloque

Es la dimensión perpendicular al flujo del texto en línea, es decir, la dimensión vertical en un modo de escritura horizontal, y la dimensión horizontal en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión vertical.

Dimensión en línea

Es la dimensión paralela al flujo del texto en línea, es decir, la dimensión horizontal en un modo de escritura horizontal, y la dimensión vertical en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión horizontal.

Referencia

Propiedades para dimensionamiento

Propiedades para márgenes, bordes y relleno

Propiedades para flotantes y posicionamiento

Otras propiedades

  • caption-side (inline-end Experimental y inline-start Experimental palabras claves)
  • resize Experimental (block Experimental y inline Experimental palabras claves)
  • text-align (end Experimental y start Experimental palabras claves)

Propiedades obsoletas

Guías

Especificaciones

Specification
CSS Logical Properties and Values Level 1

Compatibilidad en los Navegadores

En general:

  • Firefox tiene soporte para las propiedades asignadas — donde hay una directa asignación desde la versión física a la versión lógica.
  • Chrome, desde la versión 69, tiene soporte para las propiedades asignadas.
  • Edge actualmente no tiene soporte.
  • Firefox 66 introduce soporte para dos valores abreviados.

Mira la página de la propiedad en específico para tener una información más completa sobre su compatibilidad.