• Konzepte
• Die 80 wichtigsten CSS-Definitionen: Die CSS-Spezifikation hat auch eine Reihe ihrer eigenen Fachbegriffe eingeführt. Diese Seite fasst die wichtigsten Ausdrücke zusammen und erklärt sie.
• Regelaufbau: Der Artikel erklärt den logischen Aufbau, die Syntax und die Bestandteile der CSS-Regeln.
•   Die float-Regel: Eine deutsche Übersetzung der float-Regeln aus der CSS2-Spezifikation.
• Die Kaskade: Zur Lösung von Konfliktfällen innerhalb der notierten CSS-Regeln folgt CSS einer genauen Prozedur, um in mehreren Stufen die letztlich gültigen (und angewendeten) Deklarationen zu bestimmen. Dies ist die Kaskade.
• Vererbungsregeln zusammengefasst: Die Vererbung bildet eins der grundlegenden Konzepte in CSS. Sie ist aber aufgrund einiger Ausnahmen und der Nähe zur Kaskade nicht leicht zu verstehen.
• Spezifizität: Die Spezifizität ist eine der Kriterien (und ein Bestandteil der Kaskade), nach denen ein Anwenderprogramm im Konfliktfall die vorhandenen CSS-Regeln sortiert.
• CSS-Wertangaben: Jede CSS-Deklaration besteht aus einer Eigenschaft und einem oder mehreren Werten, deshalb kommt den Werten in CSS eine ebenso hohe Bedeutung zu wie den Eigenschaften selbst.
•   Farbwerte: Es werden die fünf verschiedenen Möglichkeiten vorgestellt, mit CSS 2.1 Farben zu deklarieren, dazu die Bezeichnungen der 17 Grundfarben und die Farbbezeichnungen nach SVG-1.0.
•   Längenwerte: Längenwerte werden zur Positionierung ebenso eingesetzt wie für Größenangaben und Abstände der Elemente oder Schrift- und Zeilenhöhen. Die Längenangaben sind die einzige Gruppe von Werten, ohne die das Layout einer Website nicht möglich ist.
•   Prozentwerte: Prozentangaben sind relative Werte, die sich stets auf einen anderen Wert beziehen. Für jede Eigenschaft ist individuell definiert, auf welche von drei möglichen Arten ein Prozentwert dort angewendet wird. Diese Seite ist eine Zusammenfassung aller Eigenschaften, die Prozentwerte zulassen.
•   Wertesyntax: Dieser Artikel fasst (für alle, die sich näher mit der Spezifikation befassen wollen) die formelle Syntax und die verwendeten Symbole der CSS-Werte zusammen. Hier geht es also um die Syntax innerhalb der Spezifikation CSS 2 bzw. CSS 2.1.
• Neu in CSS 2.1: Dieser Artikel stellt alle Änderungen und Ergänzungen des neuen Standards CSS 2.1 vor und diskutiert ihre Auswirkungen.
• CSS und HTML
• Dokument- Stammbaum: Für ein wohlgeformtes Webdokument ist es unerlässlich, dass eine eindeutige Baumstruktur gegeben ist. Diese Seite erklärt Grundsätze und Begriffe des Konzepts der Abstammung.
• Dokumententypen: Hier erfährt man, welche Bedeutung der Dokumententyp heute einnimmt, wie wichtig eine vollständige DOCTYPE-Deklaration ist, was Doctype-Switching ist und ob der XML-Prolog wirklich überflüssig ist.
• Anbindung von Style-Sheets: Der Artikel erläutert die Möglichkeiten, Style-Sheets an ein Webdokument anzubinden: Inline-Styles, interne Style-Sheets, das Element meta sowie externe Style-Sheets. Dabei wird auf die Regel @import, das Element link sowie auf persistent, alternate und preferred Style-Sheets eingegangen.
• CSS-Validation: Dieser Artikel fasst die wichtigsten Argumente über den Nutzen der Validation von HTML und CSS zusammen, gibt Hinweise zur Benutzung des W3C-Online-Validators und erläutert die häufigsten Fehlermeldungen.
• Box-Modell & Visual-Modell
• Modell der visuellen Formatierung: Alles über die Formatierung eines Webdokuments am Bildschirm: Generierung und Platzierung der Boxes, Überfließen und Abschneiden von Elementen, Stapeln in Z-Richtung und Kontrolle verschiedener Schreibrichtungen.
•   Visuelle Formatie-
    rung: Breite, Höhe: Jedes Element einer Webseite erzeugt eine eigene viereckige Box. Der Artikel beschreibt, wie Lage und Größe dieser Boxes abhängig von Design, Bildschirmgröße usw. berechnet werden.
• Box-Modell: Auf dieser Seite wird auf die verschiedenen Aspekte des Box-Modells eingegangen: das Prinzip anonymer Block-Boxes, die Definition des umschließenden Blocks, der Box-Modell-Hack und das Rahmenmodell für Inline-Level-Elemente in bidirektionellem Kontext.
•   Randabstände: Auf dieser Seite wird an einigen Beispielen gezeigt, wie sich die zusammenfallenden Randabstände (collapsing margins) in der Praxis auswirken. Alle Beispiele sind gleichzeitig als Browsertest konzipiert.
• Line-Box-Modell: Der Artikel geht zunächst auf Allgemeines über Inline-Level-Elemente und den Kontext zur Inline- Formatierung ein. Im Anschluss daran werden vertikale Ausrichtung und Höhe, horizontale Ausrichtung und Breite sowie Möglichkeiten zur Rahmen- und Hintergrundgestaltung von Textzeilen erläutert.
• display, float und position: CSS 2.1 bietet drei Positionierungs-Schemata für Layout und Erzeugung der Boxes in einem Webdokument: normaler Elementfluss, Floats und absolute Positionierungen. Der Artikel erläutert, wie sie sich gegenseitig beeinflussen.
• Sonstiges
• Tabellen und CSS: Eine Einführung in die Behandlung von Tabellen durch CSS: das CSS-Tabellenmodell, Höhen und vertikale Ausrichtung, Breiten und horizontale Ausrichtung, Über- und Unterschriften.
• Medien: Die Fähigkeit, zwischen verschiedenen Medien zu unterscheiden und zu definieren, wie ein Dokument in verschiedenen Medien dargestellt werden soll, ist eine der wichtigsten Charakteristika von Style-Sheets. Diese Seite erläutert das dahinter stehende Konzept.
• Seitenumbrüche: Der Artikel erklärt das CSS-Konzept zur Steuerung von Seitenumbrüchen bei der Druckausgabe

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.

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.

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.

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.