Bloco de margem - CSS-Tricks | CSS Almanac 2025

margin-blocké uma propriedade abreviada em CSS que define os valores margin-block-starte de um elemento, sendo margin-block-endque ambos são propriedades lógicas. Ele cria espaço em torno do elemento na direção em linha, que é determinada pelo elemento de writing-mode, directione text-orientation.

A propriedade faz parte da especificação CSS Logical Properties and Values Level 1 que está atualmente no status Draft do editor. Isso significa que a definição e as informações sobre ele podem mudar entre agora e a recomendação oficial.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Se o writing-modefor definido como horizontal-lr, a margin-blockpropriedade funcionará exatamente como definir margin-tope margin-bottom. Um aspecto interessante dessa propriedade é que ela é uma das propriedades lógicas que não tem um mapa um-para-um com uma propriedade não lógica. Não há nenhuma propriedade mais antiga que defina ambas (e apenas) as margens de direção do bloco.

Mas mude o elemento writing-modepara algo semelhante vertical-lre a borda “inferior” é girada na direção vertical, agindo mais como as propriedades margin-lefte margin-right.

Sintaxe

margin-block: (1,2)

É 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 que margin-top(até duas vezes), que segue 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

Se você estiver familiarizado com a marginpropriedade abreviada, então margin-blockse sentirá muito familiarizado. A única diferença é que ele funciona em duas direções em vez de quatro.

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;