Pourquoi ce style de haut-marge CSS ne fonctionne pas ?

Question

J'essaie d'ajouter des valeurs de marge sur une div à l'intérieur d'une div. Tout fonctionne bien sauf le haut de la valeur, il semble être ignoré. Mais pourquoi?

Ce que j'attendais:

Ce que j'obtiens:

CSS:

#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:block;
}

HTML:

<div id="outer">
    <div id="inner">
        Hello world!
    </div>
</div>

W3Schools n'ai aucune explication de la marge se comporter de cette façon.

Answer 1

Vous êtes en train de voir la marge supérieure de la #inner élément d'effondrement dans le bord supérieur de l' #outer élément, ne laissant que l' #outer de la marge intacte (mais ce n'est pas montré dans les images). Les bords supérieurs des deux boîtes sont alignés les uns contre les autres à cause de leurs marges sont égales.

Voici les points importants à partir du W3C spec:

8.3.1 l'Effondrement des marges

Dans le CSS, la salle de marges de deux boîtes ou plus (ce qui pourrait ou ne pourrait pas être frères et sœurs) peuvent se combiner pour former une seule marge. Des marges de combiner cette façon sont dit de s'effondrer, et la marge combinée est appelé un s'est effondré de la marge.

Attenant à la verticale marges s'effondrer [...]

Deux marges sont adjacents si et seulement si:

• les deux appartiennent à l'écoulement au niveau du bloc boîtes de participer dans le même bloc de mise en forme de contexte
• pas de ligne de boîtes, pas de jeu, pas de rembourrage et aucune frontière ne les séparer
• les deux appartiennent à la verticale-case adjacente bords, c'est à dire la forme de l'une des paires suivantes:
  • marge supérieure de la boîte et de la marge supérieure de son premier flux de l'enfant

La raison pour laquelle l'une des méthodes suivantes empêche l'effondrement de la marge:

• Flottant soit de votre div éléments
• Faire de de votre div éléments inline blocs
• Paramètre overflow de #outer de auto (ou toute autre valeur que visible)

C'est parce que:

• Les marges entre une flottait boîte et toute autre zone ne s'effondre pas (pas même entre le flotteur et son débit d'enfants).
• Les marges des éléments qui établissent de nouveaux bloc de mise en forme des contextes (comme les chars et les éléments avec 'débordement' autre qu 'visible') de ne pas s'effondrer avec leur écoulement des enfants.
• Les marges de inline-block boîtes de ne pas s'effondrer (même pas avec leur débit d'enfants).

Les marges gauche et droite se comporter comme vous le souhaitez parce que:

Marges horizontales de ne jamais s'effondrer.

Answer 2

Essayez d’utiliser `` sur la div interne.

Answer 3

Ne sais pas pourquoi ce que vous avez ne fonctionne pas, mais vous pouvez ajouter

``

à l’extérieur div.

Answer 4

Pas exactement pourquoi, mais en changeant le CSS interne à

semble fonctionner ;

Answer 5

Si vous ajoutez un éventuel remplissage à `` , ça marche.

Démo