Dass man am Wochenende die Zeit lieber nicht scriptend vor dem Rechner verbringen sollte, beweißt folgendes Beispiel.
Ich wollte Samstag mal schnell eine kleine Startseite für das trac meines Arbeitgebers zusammenbasteln. Also vom Markup her eigentlich verschwindend gering. Aus dem Code:
<body>
<div id="head_unit">
<h1>Header goes here</h1>
<a href="#">click to open</a>
</div> <div id="content_unit">
<h2>Projekte</h2>
<ul>
<li><a href="">Projekt1</a></li>
<li><a href="">Projekt2</a></li>
<li><a href="">Projekt3</a></li>
</ul>
</div>
<div id="foot_unit">
</div>
</body>
Soweit so unspannend. Ein paar Zeilen CSS später, schaute ich aber mit fragendem Blick auf meinen Firefox.
Ich hatte dem h2 innerhalb von #content_unit ein margin: 3em 0 1.5em 2em; gegeben und musste festellen das sich aufgrund des Margins der Überschrift das komplette DIV sich entsprechend dem Abstand verhielt. Normalerweise sollte sich ja nur der Abstand der Überschrift innerhalb des umschließenden Containers verändern. Es gibt so Momente da zweifelt man an seinem Verständnis des Boxmodells. Genauso einen Punkt hatte ich erwischt. Nachdem aber alle “richtigen” Browser das selbe Ergebnis brachten, konnte es weder Bug noch sonst irgendetwas sein, es musste also gewollt sein. In den Internet Explorern hingegen war die Darstellung so wie es sein sollte, mit dem Zusatz das dies durch nicht standardkonformes Verhalten hervorgerufen wird. Das berühmte “hasLayout” lässt grüßen.
Gestern morgen stellte ich das “Problem” Martin und Jens vor, die auch mehr oder weniger erstaunt waren. Nach kurzer Diskussion und einem Hinweis von Dirk Jesse fand sich die Erklärung in der CSS-Referenz von Sitepoint.
“Collapsing Margins Between Parent and Child Elements” war des Rätsels Lösung. Dieses Verhalten tritt bei Eltern- und Kindselementen auf deren Margins direkt “aneinanderliegen”, d.h.wenn zusätzlich keine Paddings oder Border definiert sind. Dieses Verhalten würde ebenfalls auftreten hätte das div zusätzlich auch noch einen Margin deklariert. Dabei würden sich die Margins sogar überlappen.
Gibt man nun einem der beiden Elemente wahlweise ein 1px padding oder ein 1px border ist Sache erledigt und die Abstände verhalten sich wie gewohnt zueinander. Den Abschnitt zum Thema sowie die komplette Referenz von Sitepoint kann ich nur jedem ans Herz legen.
“Haben wir wieder was gelernt!”
0 Kommentare zu “Collapsing Margins”
Kommentar schreiben