nicht angemeldet
Scheinbar wird margin-top für den Inhalt von divleft verdoppelt, wenn divright keinen border hat.
Das dürfte mit adjoining margins zusammenhängen.
Collapsing margins verstehe ich eher so, dass vertikal angrenzende Objekte mit einem margin-top beim oberen Element und einem margin-bottom beim unteren Element nicht die Summe dieser beiden margins als Abstand haben, sondern den größten Wert.
Siehe hier.
<div id="divright">
<div class="box boxright">
> Wenn du der zweiten Box ihr margin nimmst, dann tritt der Effekt nicht mehr auf.
Das wäre nach meiner ursprünglichen "Erklärung" dann 2 x 0 Pixel = 0 Pixel...
Diese "Box-rechts" hat ja deshalb einen margin, weil sie nicht direkt an den Fensterrand anstoßen soll.
Sonst müsste ich doch den Containerboxen (divleft, divright) ein padding von 10 Pixel und der rechten ein padding-left von 20 Pixel geben...
Geht das nicht schöner bzw. direkter?
> Wenn sie margin-top hat - dann wird dieses zum margin-top der äußeren Box hinzugenommen, sofern diese keinen Rahmen hat (oder eine der anderen genannten Eigenschaften, die den Effekt unterbinden).
\*Collapsing\* margins verstehe ich bisher so, dass von zwei Rändern der größere als Abstand verwendet wird und der kleinere ignoriert wird (siehe Link oben - 40 Pixel statt 60 Pixel).
Es sollte doch also irgendwo etwas weniger werden und nicht hinzukommen!
Weiterhin hat die äußere Box ja überhaupt keinen margin-top (0), zu dem etwas addiert oder von dem etwas subtrahiert werden könnte!
Sowohl die linke, als auch die rechte.
> Dass sich das auf die linke obere Box auswirkt, hängt dann vermutlich schlicht mit der Ausrichtung in der „Zeile“ zusammen.
Was meinst du damit - welche Zeile?
Die "BOX1" ist im linken Container, die "Box-rechts" im rechten, es sind also eher verschiedene Zeilen.
Außerdem ist immerhin der linke Container gefloatet.
"# Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children)."