Dominando margin collapsing
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
Margin collapsing ocorre em três casos básicos:
- Irmãos adjacentes
- As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar ser limpado devido ao uso de floats em elementos anteriores ). Por exemplo:
-
<p>A margem inferior deste parágrafo é colapsada...</p> <p>... com margem superior deste parágrafo.</p> - Pai e primeiro/último filho
- Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o
margin-topde um bloco domargin-topdo seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline,height,min-height, oumax-height(en-US) para separar omargin-bottomde um bloco domargin-bottomdo seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
- Blocos vázios
- Se não houver border, padding, conteúdo inline,
height, oumin-heightpara separar um blocomargin-topde suamargin-bottom, então as margens superior e inferior são colapsadas.
Algumas coisas podem ser observadas:
- Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.
- Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.
- Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).
- Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados.
Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
Especificações
| Espeficicações | Status | Comentário |
|---|---|---|
| CSS Level 2 (Revision 1) The definition of 'margin collapsing' in that specification. |
Recomendação | Definição inicial |
Veja Também
- CSS Reference
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.