Atributo CSS margin-block-end

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

Definição e uso

margin-block-end definem a margem no final da direção do bloco.

propriedades do CSS margin-block e margin-inline propriedades são semelhantes às propriedades do CSS margin-top,margin-bottom,margin-left e margin-right propriedades são muito semelhantes, mas margin-block e margin-inline A propriedade depende da direção do bloco e da direção da linha.

Atenção:propriedades CSS relacionadas writing-mode Define a direção do bloco. Isso afeta a posição de início e fim do bloco e margin-block-end O resultado da propriedade. 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 externa no final da direção do bloco:

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

Experimente você mesmo

Exemplo 2

Quando o elemento <div> writing-mode Quando a propriedade é definida como vertical-rl, a direção do bloco é de direita para esquerda. O resultado é que a posição final do elemento se move para a esquerda. Portanto, a mudança no writing-mode também afeta o efeito do margin-block-end:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
auto	Valor padrão. Margem externa padrão do elemento.
length	Especifique a distância, com unidades como px, pt, cm, etc. Valores negativos são permitidos. Veja:Unidades CSS.
%	Especifique a distância em porcentagem da largura do elemento pai na direção da 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:	Suporte. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.marginBlockEnd="20px"