Atributo CSS margin-block

Página anterior margin
Próxima página margin-block-end

Definição e uso

margin-block A propriedade especifica a margem externa de início e fim na direção do bloco, é uma abreviação das seguintes propriedades:

margin-block-start
margin-block-end

margin-block Os valores da propriedade podem ser configurados de diferentes maneiras:

Se a propriedade margin-block tiver dois valores:

margin-block: 10px 50px;

A margem externa do limite inicial é de 10px
A margem de fim é 50px

Se o atributo margin-block tiver um valor:

margin-block: 10px;

As margens de início e fim da margem são 10px

CSS margin-block e margin-inline os atributos são semelhantes às margens de início e fim do CSS. margin-top,margin-bottom,margin-left e margin-right é muito semelhante, mas margin-block e margin-inline O atributo depende da direção do bloco e da direção da linha.

Nota:propriedades CSS relacionadas writing-mode Define a direção do bloco. Isso afeta a posição inicial e final do bloco e margin-block O resultado do atributo. Para páginas em inglês, a direção do bloco é para baixo e a direção da linha é de esquerda para direita.

Exemplo

Exemplo 1

Defina a margem nos lados do bloco.

div {
  margin-block: 35px;
}

Experimente você mesmo

Exemplo 2

Quando o elemento <div> tem writing-mode Quando o valor do atributo writing-mode é vertical-rl, a posição inicial do elemento no bloco move-se da parte superior para a direita e a posição final do elemento move-se da parte inferior para a esquerda. A mudança no writing-mode também afeta o efeito do margin-block:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valor	Descrição
auto	Valor padrão. O valor padrão do margin-block do elemento.
length	Especifique margin-block em unidades como px, pt, cm. Valores negativos permitidos. Veja:Unidades CSS.
%	Especifique a porcentagem do tamanho do bloco do margin-block em relação ao elemento pai na direção de linha.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	auto
Herança:	Não
Produção de animação:	Suportado. Veja:Atributos relacionados a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.marginBlock="50px 20px"