Las propiedades físicas como el margen izquierdo suponen una página horizontal de izquierda a derecha. Las propiedades lógicas describen una posición relativa al modo de escritura, por lo que la misma regla puede adaptarse a idiomas de derecha a izquierda.

.card {
  margin-inline-start: 1rem;
  padding-block: 1rem;
  border-inline-start: 2px solid currentColor;
}

Piense en línea y bloquee direcciones

  • inline-start y inline-end siguen la dirección del texto.
  • El inicio y el final del bloque siguen el flujo del bloque, generalmente arriba y abajo.
  • Mantenga las propiedades físicas donde el diseño realmente signifique un borde físico, como un ícono de posición fija en un mapa.

Pruebe más que la alineación del texto

Cambie los atributos de idioma y directorio del documento e inspeccione los márgenes, bordes, íconos y orden de enfoque. CSS lógico maneja la geometría; no traduce etiquetas ni decide qué contenido debe reflejarse.

Utilice propiedades lógicas para componentes reutilizables y sitios de idiomas mixtos. Reducen las anulaciones RTL únicas y aclaran la relación prevista.