Warum funktioniert dieser CSS-Stil margin-top nicht?

Question

Ich versuche, die margin Werte auf einer div in einem anderen div . Alles funktioniert gut, bis auf den oberen Wert, der anscheinend ignoriert wird. Aber warum?

Was ich erwartet habe:

Was ich bekomme:

Code:

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

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

W3Schulen keine Erklärung dafür haben, warum margin verhält sich auf diese Weise.

Answer 1

Wenn Sie etwas hinzufügen padding a #outer funktioniert es. Demo hier:

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

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

Answer 2

Neuen Blockformatierungskontext erstellen

Sie können verwenden display: flow-root auf das übergeordnete Element, um zu verhindern, dass der Rand durch das enthaltende Element kollabiert, wenn es einen neuen Blockformatierungskontext erstellt.

Das Ändern des Wertes der Eigenschaft overflow in auto oder die Verwendung von flexbox hat denselben Effekt.

https://codepen.io/rachelandrew/pen/VJXjEp

Answer 3

Das beantwortet zwar nicht das "Warum" (es muss etwas mit dem kollabierenden Rand zu tun haben), aber es scheint der einfachste/logischste Weg zu sein, das zu tun, was du versuchst, nämlich hinzufügen. padding-top zum äußeren div :

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

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

Kleine Anmerkung - es sollte nicht notwendig sein, ein div auf display:block; es sei denn, es gibt etwas anderes in Ihrem Code, das es nicht blockieren soll.

Answer 4

Versuchen Sie dies:

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

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

Viel Glück!

Answer 5

Utilice padding-top:50px für äußere div. Etwas wie dies:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Hinweis: Padding vergrößert die Größe Ihres Divs. In diesem Fall, wenn die Größe Ihres div wichtig ist, ich meine, wenn es eine bestimmte Höhe haben muss. verringern Sie die Höhe um 50px..:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}