O colapso das margens é um conceito simples mas que pode gerar
alguns problemas quando não estamos atentos. Os maiores problemas
surgem quando aparece espaço vertical em branco adicional que parece
não querer desaparecer ou o outro problema parace ser a incapacidade de
criar espaço em branco na vertical usando o atributo margens
(margin) de alguma caixa (de algum elemento com
comportamento de caixa).
O que sucede é que quando duas margens verticais estão uma em
contacto com a outra, em vez de se adicionarem uma à outra, a margem
maior toma a precedência e a outra "colapsa" no nada.
Se der uma margem de 20px a dois parágrafos consecutivos (como
elementos de um documento html) a margem do topo do parágrafo de
baixo, visto tocar na margem do parágrafo de cima, cai e assim o espaço
entre os dois parágrafos mantém-se nos 20px em vez de somar 40px.
A maior parte das pessoas pensar que o colapso de margens sucede
quando um elemento do nível de bloco (um elemento com comportamento
de caixa) se sucede a outro. Contudo as margens entram em colapso
quando uma margem entra em contacto com uma margem adjacente.
Isto significa que as margens podem entrar em colapso quando um elemento
está contido noutro.
Isto sucede por exemplo quando se coloca um parágrafo (p) dentro de uma
divisão (div), ambos com margens verticais. Se a divisão tiver uma borda (border)
as margens não se tocam e somam-se, caso contrário juntam-se uma à outra
tomando a precedência a mais larga.
Como evitar colapsos
Para evitar colapsos é vulgar adicionar-se uma borda de 1px de forma a que
as margens já não se toquem e portanto já não colapsem.
Outro método é mudar a propriedade da posição (position) do elemento.
As especificações CSS2(en) [pt] explicam que margens de caixas posicionais absolutamente
e relativamente não colapsam. Outra possibilidade ainda é fazer flutuar uma das
caixas. Nem sempre é apropriado alterar as propriedades de posição
de um elemento, mas em certas circunstâncias quando estiver a ter problemas
de colapso de margens poderá ser uma opção.
Há ainda a possibilidade da margem de topo de um elemento estar em contacto
com a margem de fundo do mesmo elemento por exemplo um parágrafo vazio e nesse
caso poderá suceder que o espaço ocupado pelo parágrafo desapareça de todo.
Pode ainda haver a situação mais complicada de ter elementos flutuados, seguidos
de elementos limpos com uma margem de topo pouco mais alta do que o elemento
flutuado e ter que se perceber muito bem o que é que se deve à flutuação de
um elemento e o que se deve à pequena diferença de alturas entre o primeiro elemento
e a margem de topo do segundo elemento (esperando que nenhum esteja
completamente vazio).
Colapso de margens
Nesta especificação, a expressão colapso de margens significa que margens adjacentes (sem esquadria ou borda a separá-las) de duas ou mais caixas (que podem estar uma a seguir à outra ou aninhadas) combinam-se para formarem uma só margem.
Em CSS2, as margens horizontais nunca colapsam.
As margens verticais podem colapsar entre certas caixas:
- As margens verticais adjacentes de duas ou mais caixas bloco em fluxo normal colapsam. A largura da margem resultante é a maior das larguras das margens adjacentes. No caso de margens negativas, o máximo absoluto de margens adjacentes negativas é deduzido
do máximo de margens adjacentes positivo. Se não houver margens positivas, a margem negativa máxima absoluta é deduzida de zero.
- Margens verticais entre uma caixa flutuada e qualquer outra caixa não colapsa.
- Margens de caixas posicionadas uma absolutamente outra relativamente não colapsam.
Por favor consultar os exemplos de margens,
esquadrias e bordas para uma ilustração de margens colapsadas.
Mensagens
