Undichter Rand: Unerwarteter Versatz aufgrund verschachtelter DIVs

Question

Ich habe einige unerklärliche Seltsamkeit mit einem verschachtelten Div-Rand, der aus dem übergeordneten Container "leckt".

Die folgende Testfall * wahrscheinlich erklärt es am besten:

http://jsbin.com/ibaze

Die äußere Hülle (rot) beginnt nicht an der Spitze - es sei denn, ein Textknoten ist oder overflow: auto; auf dieses Element. (Getestet auf Firefox und Safari.)

Während Überlauf mir erlaubt, das Problem zu umgehen, würde ich gerne wissen, warum es in erster Linie passiert. Alle Einsichten würden geschätzt werden!

  * es ist ein minimaler Testfall außer für das Skript an der Unterseite, die lediglich die Abhilfen

Answer 1

Der Grund zeigt, warum es nicht funktioniert, ist, dass Ihre vertikale Marge in CSS kollabiert, welches Verhalten erwartet wird.

Entfernen Sie die Marge von #inner und stattdessen angeben, ein padding: 50px; auf Ihre #outer das gewünschte Ergebnis zu erhalten:

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    color: white; 
    background-color: blue; 
} 

#outer { 
    padding: 50px; 
    background-color: red; 
} 

#inner { 
    background-color: green; 
} 

Weitere Informationen über Vertical Margin Collapsing, empfehle ich Ihnen den folgenden Artikel zu lesen:

CSS - Auto-height and margin-collapsing