Atributo CSS margin-block-end

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

Definición y uso

margin-block-end definen el margen al final de la dirección del bloque.

Atributos de CSS margin-block y margin-inline los atributos se definen en CSS margin-top,margin-bottom,margin-left y margin-right son muy similares, pero margin-block y margin-inline El atributo depende de la dirección del bloque y la dirección de la línea.

Nota:los atributos CSS relacionados writing-mode Define la dirección del bloque. Esto afecta la posición de inicio y final del bloque y margin-block-end El resultado del atributo. Para las páginas en inglés, la dirección del bloque es hacia abajo y la dirección de la línea es de izquierda a derecha.

Ejemplo

Ejemplo 1

Establece el margen al final de la dirección del bloque:

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

Pruebe usted mismo

Ejemplo 2

Cuando el elemento <div> tiene writing-mode Cuando el valor del atributo se establece en vertical-rl, la dirección del bloque es de derecha a izquierda. El resultado es que la posición final del elemento se mueve desde la parte inferior a la izquierda. Por lo tanto, el cambio en writing-mode también afecta el efecto de margin-block-end:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block-end: 50px;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
auto	Valor predeterminado. Margen externo predeterminado del elemento.
length	Especifica la distancia, con unidades como px, pt, cm, etc. Se permiten valores negativos. Ver:Unidades CSS.
%	Especifica la distancia en porcentaje de la medida del elemento en la dirección de la línea.
initial	Establece 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:	Compatibilidad. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.marginBlockEnd="20px"