Margin-block-start - CSS-Tricks

A margin-block-startpropriedade em CSS define a quantidade de espaço ao longo da borda externa inicial de um elemento na direção do bloco. Ele está incluído na especificação CSS Logical Properties Nível 1, que está atualmente no Working Draft.

.element ( margin-block-start: 25%; writing-mode: vertical-lr; )

A borda inicial na direção do bloco é determinada pelo elemento writing-mode, directione text-orientation. Portanto, ao usar margin-block-startem um contexto horizontal da esquerda para a direita, ele atua margin-topcomo se a borda inicial do elemento fosse o topo dele.

Mas se mudarmos writing-modepara, digamos, vertical, o elemento é girado, colocando a aresta inicial para a esquerda. Como resultado, margin-block-startse comporta exatamente como margin-left. Basicamente, a borda inicial é relativa à direção em que flui. Isso é o que queremos dizer quando falamos sobre propriedades “lógicas”.

Sintaxe

margin-block-start:

É meio estranho ver a sintaxe de uma propriedade referindo-se à sintaxe de outra propriedade CSS diretamente na documentação, mas é isso mesmo. O que basicamente está tentando dizer é que a propriedade aceita os mesmos valores margin-topque seguem esta sintaxe:

margin-top: | | auto;

Valor inicial: 0
Aplica-se a: todos os elementos, exceto elementos de mesa internos, recipientes de base de rubi e recipientes de anotação de rubi
Herdado: não
Porcentagens: quanto à propriedade física correspondente
Valor calculado: igual às margin-*propriedades correspondentes
Tipo de animação: por tipo de valor calculado

Valores

margin-block-start aceita um único comprimento ou valor de palavra-chave.

/* Length values */ margin-block-start: 20px; margin-block-start: 2rem; margin-block-start: 25%; /* Keyword values */ margin-block-start: auto; /* Global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset;