Margin-inline-end - Trucos CSS | Almanaque CSS 2024

La margin-inline-endpropiedad en CSS define la cantidad de espacio a lo largo del borde final 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-end: 25%; writing-mode: vertical-lr; )

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

Pero si cambiamos writing-mode, digamos, vertical, el elemento se gira en el sentido de las agujas del reloj, colocando el borde final hacia la parte inferior. Como resultado, se margin-inline-endcomporta igual que margin-bottom. 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-end:

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-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;