Margin-inline-start - Trucos CSS

La margin-inline-startpropiedad en CSS define la cantidad de espacio a lo largo del borde inicial exterior de un elemento en la dirección en línea. Está incluido en la especificación de nivel 1 de propiedades lógicas de CSS, que actualmente se encuentra en borrador de trabajo.

.element ( margin-inline-start: 25%; writing-mode: vertical-lr; )

El borde inicial en la dirección en línea está determinado por los elementos writing-mode, directiony text-orientation. Entonces, cuando se usa margin-inline-starten un contexto horizontal de izquierda a derecha, actúa como margin-leftsi el borde inicial del elemento fuera el lado izquierdo.

Pero si cambiamos writing-modea, digamos, vertical, el elemento se gira en el sentido de las agujas del reloj, colocando el borde inicial hacia la parte superior. Como resultado, se margin-inline-startcomporta igual que margin-top. Básicamente, el borde inicial es relativo a la dirección en la que fluye. Eso es lo que queremos decir cuando hablamos de propiedades "lógicas".

Sintaxis

margin-inline-start:

Es un poco extraño ver que la sintaxis de una propiedad hace referencia a la sintaxis de otra propiedad CSS en la documentación, pero eso es realmente. Lo que básicamente está tratando de decir es que la propiedad acepta los mismos valores margin-topque siguen esta sintaxis:

margin-top: | | auto;

Valor inicial: 0
Se aplica a: todos los elementos excepto los elementos internos de la tabla, los contenedores base ruby y los contenedores de anotaciones ruby
Heredado: no
Porcentajes: en cuanto a la propiedad física correspondiente
Valor calculado: igual que las margin-*propiedades correspondientes
Tipo de animación: por tipo de valor calculado

Valores

margin-block-start acepta una sola longitud o valor de palabra clave.

/* Length values */ margin-inline-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;