Warum funktioniert dieser CSS-margin-top-Stil nicht funktioniert?

Ich versuche, um die margin-Werte auf ein div in ein weiteres div. Alles funktioniert einwandfrei außer die top-Werte, so scheint es, ignoriert zu werden. Aber warum?

, Was ich erwartet habe:

Warum funktioniert dieser CSS-margin-top-Stil nicht funktioniert?

, Was ich bekommen:

Warum funktioniert dieser CSS-margin-top-Stil nicht funktioniert?

Code:

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 habe keine Erklärung, warum die Marge auf diese Weise Verhalten.

  • haben Sie versucht, die schwebenden, die innere?
  • hum.. Mit float:left; es funktioniert... aber warum ist dies nötig. Ich will es nicht zu schweben. Und warum ist der Rand für Links/rechts arbeiten?
  • Willkommen in der lustigen Welt der CSS-margin-collapse-Algorithmus!
  • W3Schools vs. W3CDocs... ich denke, wir haben einen Gewinner. 😀
  • Set overflow: hidden auf Ihren Behältern, und Sie verriegelt sich in den Margen Ihrer Nachkommen.
  • jsFiddle es, zu retten, dem nächsten Kerl, den 25 Sekunden jsfiddle.net/kLeu9
  • Nichts für mich gearbeitet.
  • Du weißt gar nichts, Jon Schnee..
  • Ich kann mich nicht erinnern, Wann CSS ging so kompliziert. Die nur für die Anzeige-Elemente und ich sehe viele ppl mit ihm zu kämpfen. Es fühlt sich nicht wie Sie es lernen, Sie zu "studieren" können.

InformationsquelleAutor jamietelin | 2012-03-01
Schreibe einen Kommentar