margen en línea

margin-inlinemargin-inline-startes una propiedad abreviada en CSS que establece los valores y de un elemento margin-inline-end, los cuales son propiedades lógicas. Crea espacio alrededor del elemento en la dirección en línea, que está determinada 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-inline: 60px auto;  writing-mode: vertical-rl; /* Determines the inline start direction */} 

Si writing-modese establece en horizontal-lr, la margin-inlinepropiedad actuará como si se estableciera margin-lefty margin-right. 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 en línea.

Pero cambie el elemento writing-modea algo así como vertical-lry los bordes “en línea” se rotarán en la dirección vertical, actuando más como las propiedades margin-topy margin-bottom.

Sintaxis

margin-inline: '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-inlinese sentirá muy familiarizado. La única diferencia es que funciona en dos direcciones en lugar de cuatro.

/* Length values */margin-inline: 20px 40px;margin-inline: 2rem 4rem;margin-inline: 25% 15%;margin-inline: 20px; /* a single value sets both values *//* Keyword values */margin-inline: auto;/* Global values */margin-inline: inherit;margin-inline: initial;margin-inline: 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

bloque de margen

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

margen-bloque-fin

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

inicio-bloque-margen

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

margen-en-línea-final

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

margen-en-linea-inicio

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

orientación del texto

element { text-orientation: mixed; } Jwahir Sundai

modo de escritura

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