CSS -margin serie de ERROR

1. colapso fenómeno (conjunto de sub-elemento margin-top, el elemento padre se colapsará) 

Los siguientes ejemplos, de hecho, esta vez el elemento hijo es el elemento principal y la distancia 0, desde el nodo hermano del elemento padre se 100px

 　　

　　Gatillo BFC elemento padre, overflow: hidden, frontera:

Solución 1: elemento padre dispuestas transparente frontera:  1px sólido  transparente; Box-Dimensionamiento: frontera-Box; 

Solución 2: padre elemento dispuesto overflow: hidden ;

Solución 3: elemento padre proporcionado  el display: inline-Block ; anchura: 100%;

 

2. fusión margen

A: dos hermanos elemento es un elemento del valor margin-top margin-bottom superior del siguiente elemento es el valor máximo de ambos

 

Los siguientes ejemplos uno y dos de la distancia realmente 200 píxeles, no 300px;

 　　

　　Motivo: un BFC adyacente dos de la misma caja puede superponerse margen;

　　Resuelve: DOS envuelto con un div, y desencadenar una BFC div (overflow: hidden), 

 

b: dos elementos es la relación entre padre e hijo, padre y el elemento hijo tiene un margen-top, tomar el máximo

 

Ejemplos: final margin-top es 20 píxeles;

 

 Solución: el colapso y la misma