inicio-bloque-margen

La margin-block-startpropiedad en CSS define la cantidad de espacio a lo largo del borde inicial exterior de un elemento en la dirección del bloque. Está incluido en la especificación CSS Logical Properties Level 1, que se encuentra actualmente en borrador de trabajo.

.element {  margin-block-start: 25%;  writing-mode: vertical-lr;} 

El borde inicial en la dirección del bloque está determinado por el elemento writing-modey . Entonces, cuando se usa en un contexto horizontal de izquierda a derecha, actúa como si el borde inicial del elemento fuera la parte superior.directiontext-orientationmargin-block-startmargin-top

Pero si cambiamos writing-modea, digamos, vertical, el elemento se rota, colocando el borde inicial hacia la izquierda. Como resultado, margin-block-startse comporta igual que margin-left. Básicamente, el borde inicial es relativo a la dirección en la que fluye. A eso nos referimos cuando hablamos de propiedades “lógicas”.

Sintaxis

margin-block-start: ‘margin-top’

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 que margin-topsigue 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

margin-block-startacepta una única longitud o valor de palabra clave.

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

Manifestación

Haga clic en el botón en la siguiente demostración para ver cómo cambia el borde inicial del elemento con el archivo writing-mode.

Soporte del navegador

ES DECIR	Borde	Firefox	cromo	Safari	Ópera
No	79+	41+	69+	12.1+	56+

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
Si	Si	81+	12.2+	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

margen

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

bloque de margen

.element { margin-block: 30px 60px; } Geoff Graham

margen-bloque-fin

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