Él margin-inlineCSSLa propiedad abreviada es una propiedad abreviada que define los márgenes lógicos de inicio y final en línea de un elemento, que se asigna a los márgenes físicos según el modo de escritura, la direccionalidad y la orientación del texto del elemento.

/*  values */margin-inline: 10px 20px;/* An absolute length */margin-inline: 1em 2em;/* relative to the text size */margin-inline: 5% 2%;/* relative to the nearest block container's width */margin-inline: 10px;/* sets both start and end values *//* Keyword values */margin-inline: auto;/* Global values */margin-inline: inherit;margin-inline: initial;margin-inline: unset;

Esta propiedad corresponde a la margin-top y margin-bottomo el margin-right y margin-left propiedades, dependiendo de los valores definidos para writing-mode, directiony text-orientation.

Propiedades constituyentes

Esta propiedad es una abreviatura de las siguientes propiedades CSS:

  • margin-inline-start
  • margin-inline-end

Si se especifican 2 valores, el primer valor establece el inicio, el segundo valor establece el final. Si se especifica 1 valor, establece ambas propiedades con el mismo valor.

Sintaxis

Valores

Él margin-inline propiedad toma los mismos valores que la margin-left propiedad.

Definicion formal

Valor inicial 0
Se aplica a igual que margin
Heredado no
Porcentajes depende del modelo de diseño
valor calculado si se especifica como una longitud, la longitud absoluta correspondiente; si se especifica como porcentaje, el valor especificado; de lo contrario, auto
Tipo de animación discreto

sintaxis formal

<'margin-left'>1,2

Ejemplos

Configuración de márgenes de inicio y fin en línea

CSS

divbackground-color: yellow;width: 120px;height: auto;border: 1px solid green;pmargin: 0;margin-inline: 20px 40px;background-color: tan;.verticalExamplewriting-mode: vertical-rl;

HTML

<div><p>Example textp>div><divclass="verticalExample"><p>Example textp>div>

Resultado

Especificaciones

Especificación Estado Comentario
Propiedades y valores lógicos de CSS Nivel 1
La definición de ‘margen en línea’ en esa especificación.		 Borrador del editor Definición inicial.
Valor inicial 0
Se aplica a igual que margin
Heredado no
Porcentajes depende del modelo de diseño
valor calculado si se especifica como una longitud, la longitud absoluta correspondiente; si se especifica como porcentaje, el valor especificado; de lo contrario, auto
Tipo de animación discreto

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android cromo androide Firefox para Android Ópera Android Safari en IOS Samsung Internet
margin-inline 8769 79 66 No 7356 14.1 87 8769 66 48 14.5 No

Ver también

  • Las propiedades físicas mapeadas: margin-top, margin-right, margin-bottomy margin-left
  • writing-mode, direction, text-orientation