Bloque-margen - Trucos CSS | Almanaque CSS 2024

margin-blockes una propiedad abreviada en CSS que establece los valores margin-block-starty de un elemento margin-block-end, los cuales son propiedades lógicas. Se crea un espacio alrededor del elemento en la dirección en línea, que se determina por el elemento de writing-mode, directiony text-orientation.

La propiedad forma parte de la especificación de nivel 1 de valores y propiedades lógicas de CSS, que actualmente se encuentra en estado Borrador del editor. Eso significa que la definición y la información al respecto pueden cambiar entre ahora y la recomendación oficial.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Si writing-modese establece en horizontal-lr, la margin-blockpropiedad actuará como establecer margin-topy margin-bottom. Un aspecto interesante de esta propiedad es que es una de las propiedades lógicas que no tiene un mapa uno a uno con una propiedad no lógica. No existe una propiedad anterior que establezca ambos (y solo) los márgenes de dirección del bloque.

Pero cambie el elemento writing-modea algo así vertical-lry el borde "inferior" se gira en la dirección vertical, actuando más como las propiedades margin-lefty margin-right.

Sintaxis

margin-block: (1,2)

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 que margin-top(hasta dos veces) que sigue 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

Si está familiarizado con la marginpropiedad de la taquigrafía, margin-blockse sentirá muy familiar. La única diferencia es que funciona en dos direcciones en lugar de cuatro.

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;