Randinfarkt... (collapsing margins)

[Matthias Scharwies]

Guten Morgen,

ich habe den Abschnitt um fast 6KB gekürzt - die sind in die beiden Live-Beispiele geflossen:

Zusammenfallende Außenabstände

meine konkrete Verwunderung:

<div style="float:left; margin-bottom:100px">I am the X</div>
<div style="clear:both; margin-top: 100px">And solving for Y</div>

Die Margins fallen zusammen. Aber bei Float sollen sie das doch nicht.

Im Beispiel zwei unter 6. siehst du zwei floats - dort fallen sie nicht zusammen.

6. Absätze mit float
<p style="float:left; --mar-bottom: 2em;margin-bottom: var(--mar-bottom);">1. Absatz </p>  
<p style="float:left;clear:both; --mar-top: 2em;margin-top: var(--mar-top)">2. Absatz </p>

Wenn man nur das untere float lässt, gleicher Effekt!

---

Ich würde da nicht mehr schreiben.

Vorher gab es ein Codebeispiel, wo ein div durch sehr hohes negatives margin die Reihenfolge mit dem vorherigen div getauscht hatte. So etwas sollte man nicht propagieren.

Herzliche Grüße

Matthias Scharwies