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

Ich denke, die Einstellung der Position Eigenschaft der #Innen div bis relativ kann ebenfalls dazu beitragen, diese Wirkung zu erzielen. Aber auf jeden Fall habe ich versucht, den ursprünglichen Code in der Frage auf IE9 und neuesten Google Chrome eingefügt und sie geben bereits die gewünschte Wirkung ohne Änderungen.

Answer 2

Haben Sie !important vor allem versucht, es wird alles erzwingen:

margin:50px 50px 50px 50px !important;

Answer 3

Wenn Sie ein Problem mit dem Zusammenklappen von Rändern haben, können Sie Folgendes hinzufügen display: flow-root; zum übergeordneten Container.

Abgesehen davon, wenn Rand-oben ignoriert wird, versuchen Sie Rand-oben mit einem negativen Wert, zum Beispiel: margin-top: -2px;

Answer 4

Als schnelle Lösung können Sie versuchen, Ihre untergeordneten Elemente in eine div Element wie dieses -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

Marge von inner div nicht kollabieren, da das Padding von 1px Zwischenzeitlich outer y inner div. Logischerweise haben Sie also 1px zusätzlicher Platz neben der bestehenden Marge von inner div.