undichter Rand: unerwarteter Versatz durch verschachtelte DIVs

Question

Ich habe einige unerklärliche Seltsamkeit mit einem verschachtelten DIV Rand "Leck" aus dem übergeordneten Container.

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

http://jsbin.com/ibaze

Der äußere Wrapper (rot) beginnt nicht ganz oben - es sei denn, es gibt einen Textknoten oder overflow: auto; auf dieses Element. (Getestet mit Firefox und Safari.)

Während Überlauf erlaubt mir, um das Problem zu arbeiten, würde ich ganz gerne wissen, warum es in erster Linie geschieht. Jeder Einblick würde geschätzt werden!

 * Es handelt sich um einen minimalen Testfall mit Ausnahme des Skripts am Ende, das lediglich die Umgehungsmöglichkeiten veranschaulicht.

Answer 1

Der Grund, warum es nicht funktioniert, ist, dass Ihr vertikaler Rand in CSS kollabiert, was ein erwartetes Verhalten ist.

Entfernen Sie den Rand von #inner und geben Sie stattdessen eine padding: 50px; zu Ihrem #outer um das gewünschte Ergebnis zu erzielen:

* {
    margin: 0;
    padding: 0;
}

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

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

#inner {
    background-color: green;
}

Für weitere Informationen zum Thema "Vertical Margin Collapsing" empfehle ich Ihnen, den folgenden Artikel zu lesen:

CSS - Automatische Höheneinstellung und Randaussparung