Margen en línea - Trucos CSS | Almanaque CSS 2024

margin-inlinees una propiedad abreviada en CSS que establece los valores margin-inline-starty de un elemento margin-inline-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-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Si writing-modese establece en horizontal-lr, la margin-inlinepropiedad actuará como establecer 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 una propiedad anterior que establezca ambos (y solo) los márgenes de dirección en línea.

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

Sintaxis

margin-inline: (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-inlinese sentirá muy familiar. 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;