Atributo CSS margin-block

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

Definición y uso

margin-block El atributo especifica el margen exterior del borde de inicio y final en la dirección del bloque, es una abreviatura de los siguientes atributos:

margin-block-start
margin-block-end

margin-block El valor del atributo se puede configurar de diferentes maneras:

Si el atributo margin-block tiene dos valores:

margin-block: 10px 50px;

El margen exterior del borde de inicio es de 10px
el margen del borde final es de 50px

Si el atributo margin-block tiene un valor:

margin-block: 10px;

los márgenes de borde de inicio y final son de 10px

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

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

Ejemplo

Ejemplo 1

Establezca el margen lateral en la dirección de bloques.

div {
  margin-block: 35px;
}

Intente hacerlo usted mismo

Ejemplo 2

Cuando el elemento <div> tiene writing-mode Cuando el valor del atributo writing-mode es vertical-rl, la posición de inicio del elemento en la dirección de bloques se mueve desde la parte superior a la derecha, y la posición de finalización del elemento se mueve desde la parte inferior a la izquierda. El cambio en writing-mode también afecta el efecto del margen-block:

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

Intente hacerlo usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
auto	Valor predeterminado. Valor predeterminado del margen-block del elemento.
longitud	Especifique el margen-block en unidades como px, pt, cm, etc. Se permiten valores negativos. Consulte:Unidades de CSS.
%	Especifique el porcentaje de la altura del elemento padre en la dirección de línea de bloques para el margen-block.
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:	Admite. Consulte:Propiedades relacionadas con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.marginBlock="50px 20px"