Modelo de caixa: fusão de margens externas do CSS
- Página anterior Margem externa CSS
- Próxima página Visão geral da posição CSS
A fusão de margens externas se refere a, quando duas margens externas verticais se encontram, elas formarão uma margem externa.
A altura da margem externa fundida é igual ao maior dos tamanhos das margens externas que se fundem.
Fusão de margens externas
A fusão de margens externas (sobreposição) é um conceito relativamente simples. No entanto, na prática, ao fazer layout de páginas da web, ela pode causar muitas confusões.
Em termos simples, a fusão de margens externas se refere a, quando duas margens externas verticais se encontram, elas formarão uma margem externa. A altura da margem externa fundida é igual ao maior dos tamanhos das margens externas que se fundem.
Quando um elemento aparece sobre outro, a margem externa inferior do primeiro elemento e a margem externa superior do segundo elemento se fundirão. Veja a figura a seguir:
Quando um elemento está contido dentro de outro (supondo que não haja margem interna ou borda que separe as margens externas), suas margens externas superior e/ou inferior também se fundirão. Veja a figura a seguir:
Embora pareça um pouco estranho, a margem externa pode até mesmo se fundir com a própria.
Supondo que haja um elemento vazio, que possui margem externa, mas não possui borda ou preenchimento. Neste caso, a margem externa superior e a margem externa inferior se encontram, e ocorre a sua fusão:
Se essa margem encontrar a margem de outro elemento, também ocorrerá a mesclagem:
Esta é a razão pela qual uma série de elementos de parágrafo ocupa pouco espaço, porque todas as suas margens se mesclam, formando uma pequena margem.
A mesclagem de margens pode parecer estranha à primeira vista, mas na verdade, ela tem significado. Tomando como exemplo uma página de texto típica composta por vários parágrafos. O espaço acima do primeiro parágrafo é igual à margem superior do parágrafo. Sem a mesclagem de margens, a margem entre todos os parágrafos subsequentes seria a soma da margem superior e inferior adjacentes. Isso significa que o espaço entre os parágrafos é duas vezes o espaço no topo da página. Se ocorrer a mesclagem de margens, a margem superior e inferior dos parágrafos se mesclam, resultando em distâncias consistentes em todos os lugares.
Notas:Apenas as margens verticais dos blocos na corrente normal do documento ocorrem a mesclagem de margens. As margens entre os blocos inline, os flutuantes ou os absolutos não se mesclam.
- Página anterior Margem externa CSS
- Próxima página Visão geral da posição CSS
