Quando as margens se tocam

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.