Atributo margin-inline-end de CSS

Página anterior margin-inline
Página siguiente margin-inline-start

Definición y uso

margin-inline-end que especifican el margen del extremo en línea de la dirección en línea.

propiedades de 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 en línea. Esto afecta la posición de inicio y final del elemento, así como margin-inline-end El resultado del atributo. 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 del extremo en la dirección en línea

div {
  margin-inline-end: 35px;
}

Intente hacerlo usted mismo

Ejemplo 2

Cuando el atributo writing-mode Cuando el valor del atributo se establece en 'vertical-rl', la dirección en línea es hacia abajo. El resultado es que el extremo del elemento se mueve desde la derecha hacia abajo:

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

Intente hacerlo usted mismo

Ejemplo 3

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

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

Intente hacerlo usted mismo

Sintaxis de CSS

margin-inline-end: auto|length|initial|inherit;

Valor del atributo

Valor	Descripción
auto	Valor predeterminado. Valor predeterminado de margin-inline-end del elemento.
length	Especifique margin-inline-end en unidades como px, pt, cm, etc. Se permiten valores negativos. Ver:Unidades CSS.
%	Especifique margin-inline-end como un porcentaje del tamaño del elemento padre en la dirección en línea.
initial	Establezca este atributo en su valor predeterminado. Ver: initial.
inherit	Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado:	auto
Herencia:	No
Producción de animación:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.marginInlineEnd="50px"