Atributo CSS margin-block-start

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

Definição e uso

margin-block-start Define a margem de início da direção do bloco.

A propriedade do CSS margin-block e margin-inline As propriedades são semelhantes à sintaxe do CSS margin-top,margin-bottom,margin-left e margin-right As 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.

Notar:Propriedades CSS relacionadas writing-mode Define a direção do bloco. Isso afeta a posição de início e fim do bloco e o resultado da propriedade margin-block-start. 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 de início do bloco:

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

Experimente você mesmo

Exemplo 2

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

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
auto	Valor padrão. Distância margem externa padrão do elemento.
length	Especifique a distância, em unidades como px, pt, cm, etc. Valores negativos são permitidos. Veja:Unidades CSS.
%	Especifique a distância em porcentagem em relação ao tamanho 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:Atributos relacionados a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.marginBlockStart="100px"