bloque de margen

margin-blockmargin-block-startes una propiedad abreviada en CSS que establece los valores y de un elemento margin-block-end, los cuales son propiedades lógicas. Crea espacio alrededor del elemento en la dirección del bloque, que está determinado por writing-mode, directiony text-orientation.

La propiedad es parte de la especificación de Nivel 1 de Valores y Propiedades Lógicas CSS que actualmente se encuentra en estado de Borrador del Editor. Eso significa que la definición y la información al respecto pueden cambiar desde ahora hasta 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 si se estableciera 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 ninguna propiedad anterior que establezca ambos (y sólo) los márgenes de dirección del bloque.

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

Sintaxis

margin-block: 'margin-top'{1,2}

Es un poco extraño ver que la sintaxis de una propiedad hace referencia a la sintaxis de otra propiedad CSS directamente en la documentación, pero eso es realmente lo que es. Lo que básicamente intenta decir es que la propiedad acepta los mismos valores margin-top(hasta dos veces) que sigue esta sintaxis:

margin-top: length | percentage | 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: como para la propiedad física correspondiente
• Valor calculado: igual que margin-*las propiedades correspondientes
• Tipo de animación: por tipo de valor calculado

Valores

Si está familiarizado con la marginpropiedad taquigráfica, margin-blockse sentirá muy familiarizado. 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;

Manifestación

Soporte del navegador

ES DECIR	Borde	Firefox	cromo	Safari	Ópera
No	No	66+	87+	No	No

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
Si	Si	No	No	59+

Otras lecturas

Propiedades lógicas CSS

Chris Coyier

Reglas horizontales bidireccionales en CSS

Chris Coyier

Creación de diseños multidireccionales.

Ahmad El-Alfy

Mejoras en el diseño lógico con taquigrafías relativas al flujo.

Chris Coyier

Propiedades relacionadas

dirección

.element { direction: rtl; } Sara Cope

margen

.element { margin: 50px 2rem; } Sara Cope

margen-bloque-fin

.element { margin-block-end: 25%; } Geoff Graham

inicio-bloque-margen

.element { margin-block-start: 25%; } Geoff Graham

orientación del texto

element { text-orientation: mixed; } Jwahir Sundai

modo de escritura

.element { writing-mode: vertical-rl; } Robin Rendle