Problema de colapso del margen (fusión) (elementos de tipo bloque)
Solo aparece en dirección vertical
Colapso de anidación de padre e hijo
** Descripción: ** Cuando el elemento primario tiene un margen superior, el elemento secundario tendrá un valor mayor como el margen final al establecer el margen superior. Cuando se establece el margen superior para el elemento secundario, se moverá hacia abajo con el cuadro principal
*{
margin: 0;
padding: 0;
}
.big {
width: 300px;
height: 300px;
background-color: greenyellow;
}
.small {
width: 100px;
height: 100px;
background-color: grey;
margin-top: 20px;
}
<div class="big">
<div class="small">
</div>
Razón:
Apariencia: el navegador no comprende que el margen superior que establece es el margen superior del cuadro principal
La esencia: reglas BFC (contexto de nivel de bloque) La dirección vertical es que los márgenes exteriores de los dos cuadros anidados se fusionarán (compartieron un área común)
Método:
1. No permita que el navegador malinterprete que esta distancia pertenece al área pública
(1) Agregue 1px borde superior a la caja principal border-top: 1px solid #fff ; (separado)
(2) Agregue 1px de relleno superior a la caja principal padding-top: 1px; (separado)
(3) Proporcione el elemento padre + desbordamiento: oculto (desencadenar ámbito de nivel de bloque privado en BFC) para hacer este cuadro fuera de un área cerrada
No afecta interno, no afecta externo
Hermanos colapsando hacia arriba y hacia abajo en paralelo
Descripción:
Dos cuadros establecen el margen inferior del cuadro superior y el margen superior del cuadro inferior tomará el valor más grande ya que el margen final es el mismo
** Motivo: ** Dos cajas comparten un margen
Método :
- Evitar (escrito en la caja)
- Anide los dos cuadros con un cuadro principal y escriba el desbordamiento: oculto en el cuadro principal
- Es mejor escribir solo en un cuadro
