Pourquoi ce style CSS de marge supérieure ne fonctionne-t-il pas ?

Question

J'ai essayé d'ajouter une valeur margin sur un div Tout fonctionne bien sauf la valeur la plus élevée, qui semble ignorée. Mais pourquoi?

Mes attentes :

Ce que j'ai obtenu :

Code :

#outer {
  largeur : 500 px ;
  hauteur : 200px ;
  contexte : #FFCCCC ;
  marge : 50px auto 0 auto ;
  bloc de visualisation;
}

#intérieur {
  arrière-plan : #FFCC33 ;
  marge : 50px 50px 50px 50px ;
  remplissage : 10 px ;
  bloc de visualisation;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="outer">
  <div id="intérieur">
    Bonjour le monde!
  </div>
</div>

W3Schools n'explique pas pourquoi cela se produit avec margin.

Answer 1

Essayez-le à l'intérieurdiv上使用display: inline-block;. Comme ça :

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

Answer 2

Ce que vous voyez réellement, c'est que les #inner 元素的上边距 折叠到#outer元素的上边缘，仅保留#outermarges sont intactes (bien qu'elles ne soient pas montrées dans l'image). Les bords supérieurs des deux cases sont alignés car leurs marges sont égales.

Voici les points pertinents de la spécification W3C :

Vous pouvez effectuer l'une des opérations suivantes pour éviter que les marges ne s'effondrent :

Les options ci-dessus empêchent les marges de s'effondrer car :

Les marges gauche et droite se comportent comme prévu car :