Margen-bloque-fin - Trucos CSS | Almanaque CSS 2024

La margin-block-endpropiedad en CSS define la cantidad de espacio a lo largo del borde final exterior de un elemento en la dirección del bloque. 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-block-end: 25%; writing-mode: vertical-lr; )

El borde final en la dirección del bloque está determinado por los elementos writing-mode, directiony text-orientation. Entonces, cuando se usa margin-block-enden un contexto horizontal de izquierda a derecha, actúa como margin-bottomsi el borde inicial del elemento fuera la parte inferior.

Pero si cambiamos writing-modea, digamos, vertical, el elemento se rota, colocando el borde final hacia la derecha. Como resultado, se margin-block-endcomporta igual que margin-right. 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-block-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-end acepta una sola longitud o valor de palabra clave.

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