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-top
de um bloco domargin-top
do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline,height
,min-height
, oumax-height
(en-US) para separar omargin-bottom
de um bloco domargin-bottom
do 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-height
para separar um blocomargin-top
de 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.