Atributo CSS margin-block-start

Definición y uso

margin-block-start propiedad especifica el margen al inicio de la dirección del bloque.

las propiedades de CSS margin-block y margin-inline los atributos y los de CSS margin-top,margin-bottom,margin-left y margin-right los atributos 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:Atributos CSS relacionados writing-mode Definido por el bloque de dirección. Esto afecta la posición de inicio y final del bloque y el resultado del atributo margin-block-start. 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 inicio de la dirección del bloque:

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

Intente hacerlo usted mismo

Ejemplo 2

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

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

Intente hacerlo usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
auto Valor predeterminado. La distancia de margen externo predeterminada del elemento.
longitud Especifica la distancia, en unidades como px, pt, cm, etc. Se permiten valores negativos. Ver:Unidades CSS.
% Especifica la distancia en porcentaje en relación con el tamaño del elemento padre 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.marginBlockStart="100px"

Compatibilidad del navegador

Las cifras en la tabla representan la versión del navegador que admite completamente la propiedad.

Chrome Edge Firefox Safari Opera
87.0 87.0 41.0 12.1 73.0

Páginas relacionadas

Referencia:Atributo CSS margin-block

Referencia:Atributo CSS margin-block-end

Referencia:Atributo CSS margin-bottom

Referencia:Atributo margin-inline de CSS

Referencia:Atributo margin-left de CSS

Referencia:Atributo margin-right de CSS

Referencia:Atributo margin-top de CSS

Referencia:Atributo writing-mode de CSS