Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Collapsing margins und wie man sie vermeidet

Collapsing margins und wie man sie vermeidet – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Gratismonat starten Für Ihr Team erwerben

Collapsing margins und wie man sie vermeidet

“

Sie sehen hier die Startseite der Übungswebsite, aktueller Stand. Und jetzt geht es um Collapsing Margins, die manchmal für Kopfschmerzen sorgen. Und ich möchte erst einmal erklären, was es damit auf sich hat, und zeige mit dem Mauszeiger hier auf einen Absatz. Sie sehen, dass der oben und unten Margin hat, das kommt vom Browser-Stylesheet: 1em oben, 1em unten. Und der nächste Absatz hat das natürlich auch. Eigentlich sollte man also erwarten, dass zwischen den aufeinanderfolgenden Absätzen ein Abstand von 2em wäre, tatsächlich beträgt er aber nur 1em. Das kommt, weil die Margins miteinander verschmelzen. Wenn vertikale Abstände sich berühren, dann verschmelzen sie. Haben sie gleiche Werte, wird einer von den beiden übernommen, also 1em. Haben sie unterschiedliche Werte, bleibt der größere erhalten. Im Fließtext ist das sogar eine gute Idee. Für meist eher unliebsame Überraschungen sorgt aber der Umstand, dass Außenabstände nicht nur bei aufeinanderfolgenden Elementen verschmelzen…

Inhalt