CSS 2.1 ::Grundlegendes

Praktische Beispiele für collapsing margins

Auf dieser Seite wird an einigen Beispielen gezeigt, wie sich die zusammenfallenden Randabstände (collapsing margins) in der Praxis auswirken. Die Beispiele sind durch XHTML und CSS realisiert — so kann jeder selbst feststellen, ob sein Browser sie richtig darstellt. In jedem Beispiel wird auch auf einen Screenshot verwiesen, der die korrekte Darstellung enthält.

Beispiel 1: Benachbarte Elemente

Zwei Elemente DIV, dargestellt als eine blau und eine grün schraffierte Box mit rotem Rand, sind die Testelemente, an denen nacheinander verschiedene margins angebracht werden. Sie liegen als Nachbarn untereinander in einer gemeinsamen umschließenden Block-Box mit schwarzem Rand. (In der Regel nehmen Block-Level-Elemente die gesamte zur Verfügung stehende Breite innerhalb des umschließenden Blocks ein. Hier wurde den DIV-Elementen zur Platzersparnis nur eine schmale Breite zugestanden.)

In diesem Beispiel sollen nur die margins betrachtet werden, die direkt aneinander anstoßen: die margin-bottom der oberen Box und die margin-top der unteren Box.

Hier noch einige Hinweise zum besseren Verständnis der Darstellung:

  1. Am oberen Ende der blau schraffierten Box ist gelb unterlegt der deklarierte Wert für margin-bottom in Pixel angegeben.
  2. Am unteren Ende der grün schraffierten Box ist gelb unterlegt der deklarierte Wert für margin-top in Pixel angegeben.
  3. Beide Boxes liegen innerhalb einer äußeren Box, die mit einem Hintergrundgitter (10 Pixel × 10 Pixel) versehen ist. Damit kann man leicht feststellen, ob ein Anwenderprogramm die Sollwerte einhält oder nicht.
  4. Oberhalb der Boxes ist in rot angegeben, wie groß der resultierende Soll-Abstand zwischen beiden Boxes nach der Spezifikation sein sollte. Negative Zahlen bedeuten hier, dass die Boxes sich überlappen. Wenn der Abstand der Boxes voneinander bzw. ihre Überlappung mit dem rot gedruckten Wert übereinstimmt, ist die Darstellung Ihres Browsers korrekt.
  5. In der folgenden Serie stellt die erste, hellblau unterlegte, äußere Box den Ausgangszustand dar, bei dem die margins beider rotumrandeten Boxes ihre Ausgangswerte, nämlich '0', haben.
  6. Etwa in der Mitte der Serie haben die margins beider Boxes unterschiedliche Vorzeichen, dieser Bereich ist durch hellroten Hintergrund hervorgehoben.

+-0

init'l
init'l

+60

+60
+20

+50

+50
+20

+40

+40
+20

+30

+30
+20

+20

+20
+20

+20

+10
+20

+20

+-0
+20

+10

-10
+20

+-0

-20
+20

-10

-30
+20

-20

-40
+20

-30

-50
+20

-40

-50
+10

-50

-50
+-0

-50

-50
-10

-50

-50
-20

-50

-50
-30

-50

-50
-40

-50

-50
-50

-60

-50
-60

-70

-50
-70

Wir sehen also, dass wir mit Hilfe einer negativen margin das grün schraffierte Element gut und gern über das blau schraffierte Element nach oben wegziehen könnten. Innerhalb des normalen Flusses lässt sich aber nicht das blau schraffierte Element nach unten ziehen, denn im normalen Elementfluß werden immer alle Elemente so weit wie möglich nach oben gerückt.

Browser, die diese Beispiele korrekt darstellen, sind Opera 6+, Firefox und IE/Win 6+. Wenn Sie glauben, dass Ihr Browser die Beispiele oben nicht korrekt darstellt, können Sie sich eine Grafik ansehen, die zeigt, wie es aussehen soll.

Beispiel 2: Geschachtelte (Elter- und Kind-)Elemente

Auch hier sind unsere Testelemente wieder zwei rot umrandete DIVs, sie liegen aber in diesem Fall nicht als Nachbarn untereinander, sondern sind ineinander verschachtelt.

  1. Das äußere Element ist blau schraffiert, das innere Element ist grün schraffiert.
  2. Um zu erreichen, dass die margins beider Elemente sich tatsächlich berühren, wurde der Rahmen oben (border-top) von der äußeren Box entfernt. Anderenfalls hätte dieser Rahmen zwischen dem Außenabstand der äußeren Box und dem der inneren Box gestanden und ein Zusammenfallen beider margins von vornherein ausgeschlossen.
  3. In beiden Boxes ist gelb unterlegt der deklarierte Wert für margin-top in Pixel angegeben.
  4. Die blaue punktierte Linie oberhalb der Boxes bezeichnet die Stelle, an der die Resultierende der beiden zusammen gefallenen margins endet. Der Abstand der Boxes zu dieser Linie ist also der Istzustand, den Ihr Browser tatsächlich erzeugt.
  5. Darüber ist in rot angegeben, wie groß der resultierende Soll-Abstand beider Boxes nach der Spezifikation sein sollte. Negative Zahlen bedeuten hier, dass die Boxes nach oben über die blaue Linie hinausstehen. Wenn der Abstand der Boxes von der blauen Linie mit dem rot gedruckten Wert übereinstimmt, ist die Darstellung Ihres Browsers korrekt.
  6. Auch hier stellt wieder die erste, hellblau unterlegte, äußere Box den Ausgangszustand dar, bei dem die margins beider rotumrandeten Boxes ihre Ausgangswerte, nämlich '0', haben.

+-0

init'l
init'l

+70

+20
+70

+60

+20
+60

+50

+20
+50

+40

+20
+40

+30

+20
+30

+20

+20
+20

+20

+20
+10

+20

+20
+-0

+10

+20
-10

+-0

+20
-20

-10

+20
-30

-20

+20
-40

-30

+20
-50

-30

+10
-40

-30

+-0
-30

-20

-10
-20

-20

-20
-10

-30

-30
+-0

-30

-40
+10

-30

-50
+20

-20

-50
+30

An diesem Beispiel zeigt sich, dass das Kindelement niemals außerhalb der Fläche des Elterelements dargestellt werden kann, wenn ihre margins kollabieren — jedenfalls nicht, wenn der Browser beide Elemente standardkonform darstellt.

Browser, die diese Beispiele korrekt darstellen, sind Opera 7+ und Firefox, nicht aber Opera 6 und IE/Win 6.0 oder 7.0. Wenn Ihr Browser die Beispiele oben nicht korrekt darstellt, können Sie sich eine Grafik ansehen, die zeigt, wie es aussehen soll.

Beispiel 3: Verschachtelte Elemente, relativ positioniert

Für dieses Beispiel erinnern wir uns, dass margins von Elementen, die anders als statisch positioniert sind, nicht zusammen fallen können. Deshalb wollen wir uns jetzt einmal ansehen, was passiert, wenn mindestens eins der beiden Elemente nicht dem normalen Elementfluß unterliegt. Dazu nutzen wir das Beispiel 2 von oben in der exakt gleichen Konfiguration. Wir ergänzen aber das Stylesheet so, dass hier das blau schraffierte Element, also die äußere der beiden rot umrandeten Boxes, relativ positioniert ist. Hier folgen noch einmal alle Darstellungshinweise:

  1. Das äußere Element ist blau schraffiert, das innere Element ist grün schraffiert.
  2. Das blau schraffierte Element ist relativ positioniert.
  3. Um zu erreichen, dass die margins beider Elemente sich tatsächlich berühren, wurde der Rahmen oben (margin-top) von der äußeren Box entfernt. Anderenfalls hätte dieser Rahmen zwischen dem Außenabstand der äußeren Box und dem der inneren Box gestanden und ein Zusammenfallen beider margins von vornherein ausgeschlossen.
  4. In beiden Boxes ist gelb unterlegt der deklarierte Wert für margin-top in Pixel angegeben.
  5. Die blaue punktierte Linie oberhalb der Boxes bezeichnet die Stelle, an der die Resultierende der beiden zusammen gefallenen margins endet. Der Abstand der Boxes zu dieser Linie ist also der Istzustand, den Ihr Browser tatsächlich erzeugt.
  6. Darüber ist in rot angegeben, wie groß der resultierende Soll-Abstand beider Boxes nach der Spezifikation sein sollte. Negative Zahlen bedeuten hier, dass die Boxes nach oben über die blaue Linie hinausstehen. Wenn der Abstand der Boxes von der blauen Linie mit dem rot gedruckten Wert übereinstimmt, ist die Darstellung Ihres Browsers korrekt.
  7. Auch hier stellt wieder die erste, hellblau unterlegte, äußere Box den Ausgangszustand dar, bei dem die margins beider rotumrandeten Boxes ihre Ausgangswerte, nämlich '0', haben.

+-0

init'l
init'l

+70

+20
+70

+60

+20
+60

+50

+20
+50

+40

+20
+40

+30

+20
+30

+20

+20
+20

+10

+20
+10

+-0

+20
+-0

-10

+20
-10

-20

+20
-20

-30

+20
-30

-40

+20
-40

-50

+20
-50

-40

+10
-40

-30

+-0
-30

-30

-10
-20

-30

-20
-10

-30

-30
+-0

-30

-40
+10

-30

-50
+20

-20

-50
+30

An der korrekten Darstellung sehen wir also, dass der Browser zunächst die margins der äußeren, relativ positionierten, Box (blau schraffiert) auswertet und im Anschluß daran die grün schraffierte Box mit ihren vollen margins darstellt.

Leider wird dies bis heute nur durch Opera 7+ korrekt dargestellt, alle anderen Browser haben hier noch Probleme. Wenn Ihr Browser diese Beispiele nicht korrekt darstellt, können Sie sich eine Grafik ansehen, die zeigt, wie es aussehen soll.

Weitere Referenzinformationen über margin und margin[top|right|bottom|left] finden Sie ebenfalls auf dieser Website.
TOP

Hinweis:
Beim Ausdruck dieser Seite können Probleme mit der vertikalen Ausrichtung der grafischen Boxen auftreten. Das liegt daran, dass einige Boxen über einen Seitenumbruch hinausgehen.


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: thestyleworks.de/basics/margins.shtml
Gedruckt am Sonntag, dem 24. September, 2017.
© Copyright All Contents 2002- 2017 K. Langenberg.
Commercial Use prohibited.


Notizen: