margen-en-linea-inicio

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

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

El borde inicial en la dirección en línea está determinado por el elemento writing-modey direction. text-orientationEntonces, cuando se usa margin-inline-starten un contexto horizontal de izquierda a derecha, actúa como margin-leftsi el borde inicial del elemento fuera el lado izquierdo.

Pero si cambiamos writing-modea, digamos, vertical, el elemento gira en el sentido de las agujas del reloj, colocando el borde inicial hacia la parte superior. Como resultado, margin-inline-startse comporta igual que margin-top. 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-inline-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-inline-start: 20px;margin-inline-start: 2rem;margin-inline-start: 25%;/* Keyword values */margin-inline-start: auto;/* Global values */margin-inline-start: inherit;margin-inline-start: initial;margin-inline-start: unset;

Manifestación

Haga clic en el botón en la siguiente demostración para ver cómo el borde en línea inicial del elemento cambia 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

margen Chris Coyier

Reglas horizontales bidireccionales en CSS

margen Chris Coyier

Creación de diseños multidireccionales.

margen Ahmad El-Alfy

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

margen Chris Coyier

Propiedades relacionadas

margen

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

bloque de margen

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

margen-bloque-fin

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

inicio-bloque-margen

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

margen en línea

.element { margin-inline: 60px auto; } margen Geoff Graham

margen-en-línea-final

.element { margin-inline-end: 3rem; } margen Geoff Graham