Ce que @BoltClock a mentionné est assez solide. Et ici, je veux juste ajouter plusieurs autres solutions à ce problème. vérifiez cette marge w3c_collapsing . Les parties vertes sont la pensée potentielle de la façon dont ce problème peut être résolu.
Solution 1
Les marges entre une boîte flottante et toute autre boîte ne s'effondrent pas (pas même entre un flotteur et ses enfants entrants).
cela signifie que je peux ajouter float:left
à l'un #outer
ou à #inner
demo1 .
notez également que float
cela invaliderait la auto
marge.
Solution 2
Les marges des éléments qui établissent de nouveaux contextes de mise en forme de bloc (tels que les flottants et les éléments avec un «débordement» autre que «visible») ne s'effondrent pas avec leurs enfants entrants.
autre que visible
, mettons overflow: hidden
dans #outer
. Et cette façon semble assez simple et décente. Je l'aime.
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
overflow: hidden;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Solution 3
Les marges des boîtes absolument positionnées ne s'effondrent pas (même pas avec leurs enfants entrants).
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: absolute;
}
#inner{
background: #FFCC33;
height: 50px;
margin: 50px;
}
ou
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: relative;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
position: absolute;
}
ces deux méthodes vont rompre le flux normal de div
Solution 4
Les marges des boîtes de blocs en ligne ne s'effondrent pas (pas même avec leurs enfants entrants).
est le même que @enderskill
Solution 5
La marge inférieure d'un élément de niveau bloc en flux s'effondre toujours avec la marge supérieure de son frère frère au niveau bloc suivant, sauf si ce frère a un dégagement.
Cela n'a pas beaucoup de travail à faire avec la question car c'est la marge qui s'effondre entre frères et sœurs. cela signifie généralement si un top-box a margin-bottom: 30px
et un frère a margin-top: 10px
. La marge totale entre eux est 30px
au lieu de 40px
.
Solution 6
La marge supérieure d'un élément de bloc entrant s'effondre avec la première marge supérieure de son enfant au niveau du bloc entrant si l'élément n'a pas de bordure supérieure, pas de rembourrage supérieur et que l'enfant n'a aucun dégagement.
C'est très intéressant et je peux juste ajouter une ligne de bordure supérieure
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
border-top: 1px solid red;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Et <div>
est également au niveau du bloc par défaut, vous n'avez donc pas à le déclarer exprès. Désolé de ne pas pouvoir publier plus de 2 liens et images en raison de ma réputation de novice. Au moins, vous savez d'où vient le problème la prochaine fois que vous verrez quelque chose de similaire.