Atributo margin-inline de CSS

Página anterior margin-bottom
Página siguiente margin-inline-end

Definición y uso

margin-inline El atributo especifica el margen externo al inicio y al final en la dirección de la línea, es una abreviatura de los siguientes atributos:

margin-inline Los valores del atributo se pueden configurar de diferentes maneras:

Si el atributo margin-inline tiene dos valores:

margin-inline: 10px 50px;

El margen externo al inicio es de 10px
El margen externo al final es de 50px

Si el atributo margin-inline tiene un valor:

margin-inline: 10px;

Los márgenes de inicio y finalización son de 10px

CSS margin-inline y margin-block Las propiedades son similares a margin-top,margin-bottom,margin-left y margin-right Las propiedades son muy similares, pero margin-inline y margin-block El atributo depende de la dirección de bloque y la dirección en línea.

Nota:Propiedades CSS relacionadas writing-mode y direction Define la dirección de línea en línea. Esto afecta la posición de inicio y finalización del elemento, así como el resultado del atributo margin-inline-end. Para las páginas en inglés, la dirección de bloque es hacia abajo, y la dirección en línea es de izquierda a derecha.

Ejemplo

Ejemplo 1

Establezca el margen lateral en la dirección de línea:

div {
  margin-inline: 35px;
}

Intente usted mismo

Ejemplo 2

Cuando el atributo <div> writing-mode Cuando el valor del atributo se establece en 'vertical-rl', la dirección de línea es hacia abajo. El resultado es que la posición de inicio del elemento se mueve desde la izquierda a la parte superior, y la posición de finalización desde la derecha a la parte inferior:

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

Intente usted mismo

Ejemplo 3

Cuando el atributo <div> direction Cuando el valor del atributo se establece en 'rtl', la dirección de línea es de derecha a izquierda. El resultado es que la posición de inicio del elemento se mueve desde la izquierda a la derecha, y la posición de finalización desde la derecha a la izquierda:

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

Intente usted mismo

Sintaxis de CSS

margin-inline: auto|longitud|initial|inherit;

Valor del atributo

Valor	Descripción
auto	Valor predeterminado. Valor predeterminado de margin-inline del elemento.
longitud	Especifique el margin-inline con unidades como px, pt, cm, etc. Se permiten valores negativos. Consulte:Unidades CSS.
%	Especifique el porcentaje del tamaño en la dirección de línea del margin-inline en relación con el elemento padre.
initial	Establezca esta propiedad en su valor predeterminado. Vea: initial.
inherit	Hereda esta propiedad del elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado:	auto
Herencia:	No
Producción de animación:	Compatibilidad. Consulte:Propiedades relacionadas con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.marginInline="50px 10px"