Colapso del Margen CSS

Entonces, ¿el colapso del margen ocurre esencialmente cuando no se establece ningún margen o margen o borde a un elemento div dado?

No. Cuando tiene dos márgenes verticales adyacentes, se usa el mayor de los dos y el otro se ignora.

Entonces, por ejemplo, si tiene dos elementos de visualización en bloque, A, seguido por B debajo de él, y A tiene un margen inferior de 3em, mientras que B tiene un margen superior de 2em, entonces la distancia entre ellos será 3em .

Si establece un borde o relleno, esto evita que se produzca el colapso. En el ejemplo anterior, la distancia entre los dos elementos será de 5em.

Si no establece ningún margen, entonces no habrá ningún margen para contraer. No tiene nada que ver con el tipo de elemento en uso: se aplica a todos los tipos de elementos, no solo a los elementos

.

Lea la especificación CSS 2.1 para más detalles.

“La expresión que colapsa los márgenes significa que los márgenes adyacentes (sin contenido no vacío, relleno o áreas de borde o espacio libre que los separa) de dos o más recuadros (que pueden estar uno junto al otro o nesteds) se combinan para formar un margen único”.

Fuente: Modelo de caja – 8.3.1 Colapsando márgenes