CSS Margem de desmoronamento

Question

Então, basicamente faz margem de colapso ocorrer quando você não definir qualquer margem ou preenchimento ou fronteira para um determinado elemento div?

Answer 1

No. Quando você tem duas margens verticais adjacentes, o maior dos dois é utilizado eo outro é ignorado.

Assim, por exemplo, se você tem dois elementos de bloco de exibição, A, seguido por B abaixo dela, e A tem um bottom-margem de 3em, enquanto B tem um top-margem de 2em, então a distância entre eles será 3em.

Se você definir uma borda ou preenchimento, isso impede que o colapso ocorra. No exemplo acima, a distância entre os dois elementos vão, em seguida, ser 5em.

Se você não definir quaisquer margens, então não haverá qualquer margem para um colapso. Ele não tem nada a ver com o tipo de elemento em uso -. É aplicável a todos os tipos de elementos, não apenas elementos <div>

Leia o CSS 2.1 especificação para mais detalhes.

Answer 2

"a expressão colapso margens meios que as margens adjacentes (sem conteúdo em não-vazia, de preenchimento ou de fronteira áreas ou folga separá-los) de duas ou mais caixas (que podem estar ao lado de um outro ou aninhado) combinam-se para formar uma única margem . "

Fonte: Box Model - 8.3.1 margens em colapso