Margin-block-end - CSS-Tricks

A margin-block-endpropriedade em CSS define a quantidade de espaço ao longo da borda externa final 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-end: 25%; writing-mode: vertical-lr; )

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

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

Sintaxe

margin-block-end:

É 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-end aceita um único comprimento ou valor de palavra-chave.

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