Markup Webdesign Journal

(Aus dem englischen Original ins Deutsche übersetzt)

Das ist der zweite von drei Teilen aus der aufregenden Welt der Vierecke. Im ersten Teil haben wir die beiden Konzepte von Block und Inline in HTML und CSS verglichen.

Im zweiten Teil werden wir uns die Block-Boxen im normalen Dokumentfluss näher ansehen und lernen, wie man mit ihnen umgeht.

Dieser Artikel beschäftigt sich, wie bereits erwähnt, mit Block-Boxen im normalen Dokumentfluss (ohne floats und nicht absolut positioniert). “Gefloatete” oder absolut positionierte Elemente werden anders gehandhabt (Tommy Olsson hat darüber weitere Artikel geschrieben: “Float Layouts” und “Relatively absolute”).

Block-Boxen

Die folgenden Werte für die display-Eigenschaft erzeugen Kästchen bzw. Boxen:

• block
• list-item
• table (hier nicht behandelt)
• run-in (manchmal)

Run-in Boxen erzeugen manchmal Block-Boxen, manchmal Inline-Boxen. Das ist abhängig vom darauf folgenden Boxentyp. Wir werden uns das im dritten Teil dieser Serie ansehen.

Hauptblock- und anonyme Boxen

Ein Block-Level Element oder ein Element mit den oben genannten Display Werten erzeugen eine sogenannte Hauptblock-Box. Eine Hauptblock-Box enthält entweder nur Block-Boxen oder nur Inline-Boxen. Elemente, die einen Mix aus Block-Level- und Inline Elementen oder reinen Text beinhalten, erzeugen sogenannte anonyme Block-Boxen. Das führt dazu, dass die Hauptblock-Box nur noch Block-Boxen enthält. Beispiel:

      <div>
        Eine Zeile Text
        <p>Textabsatz</p>
        Eine andere Zeile Text
      </div>

Hier werden drei Block-Boxen erzeugt: Als erstes eine anonyme Block-Box für die Zeile Text. Eine weitere für den Textabsatz (<p>) und schließlich eine zweite anonyme Block-Box für die andere Zeile Text. In der Praxis bedeutet das natürlich, dass der Textabsatz in einer eigenen Zeile dargestellt wird, sodass es scheint, dass vor und nach dem Absatz Zeilenumbrüche erzeugt wurden.

Eine Hauptblock-Box wird zum enthaltenden (umschließenden) Block für seine nachkommenden Boxen, was dazu führt, dass diese statisch oder relativ positioniert werden (zur umgebenden Box). Für gefloatete und absolut positionierte Boxen gelten andere Regeln.

Wird das Element selbst positioniert, ist es die Hauptblock-Box, die positioniert wird. Wenn nicht, dann nimmt die Hauptblock-Box am sogenannten “block formatting context” teil, der zu einem späteren Zeitpunkt betrachtet wird.

Boxen aus Listenelementen

Elemente mit dem Displaywert “list-item”, was der Standardwert für LI-Elemente ist, erzeugen ebenfalls Hauptblock-Boxen, wie jedes andere Block-Level Element. Normalerweise erzeugen sie zudem eine weitere Box, nämlich für das Aufzählungszeichen des Listenelements. Ist der Wert für list-style-position “outside”, wird die sogenannte Markerbox außerhalb der Hauptblock-Box des Listenelements erzeugt. Ist der Wert “inside”, wird die Markerbox als erste Inlinebox innerhalb der Hauptblock-Box erzeugt. Anschließend folgt der Inhalt des Listenelements. Die CSS 2.1 Spezifikation legt nicht genau fest, wo die Markerbox sonst platziert werden sollte.

Es ist wichtig zu erwähnen, dass die folgenden Eigenschaften nur für die Hauptblock-Box der Listenelemente gelten:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Die Box für das Listenanführungszeichen (bei list-style-position: outside) ist immer transparent.

Block-Boxen formatieren (”block formatting context”)

Es klingt vielleicht etwas bedrohlich. Es geht um das Layout der Block-Boxen. Hauptblock-Boxen - und Floats; absolut positionierte Elemente; Inline Blocks (werden im nächsten Artikel erklärt); Tabellenzellen und Elemente deren Overflow-Wert was anderes ist als “visible”. Alle führen zu einem neuen Formatierungskontext.

Was bedeutet das? In einem solchen Zusammenhang werden Block-Boxen vertikal ausgelegt, eine nach der anderen, von oben nach unten. In obigem Beispiel wurde die erste anonyme Block-Box als erstes ausgelegt. Danach der Block mit dem Textabsatz, gefolgt von der zweiten anonymen Block-Box. So einfach ist das.

Die linke Kante jeder Block-Box berührt die linke Kante der Hauptblock-Box (wenn von links nach rechts gelesen wird). Es ist darauf zu achten, dass dies auch dann gilt, wenn ein “gefloatetes” Element im Weg ist. In diesem Fall werden die Inline-Boxen (nächster Artikel) so gekürzt, dass sie Platz für den Float machen, wie es im Artikel “Float Layouts” erklärt wird. Erzeugt die Box einen neuen Block zur Formatierung, kann diese trotzdem schmaler werden, wenn ein “gefloatetes” Element im Weg ist.

Zusammenbrechende Abstände (”collapsing margins”)

Der vertikale Abstand zweier “Geschwisterboxen” in einem Block-Kontext wird über die Eigenschaften “margin-top” und “margin-bottom” bestimmt (Geschwisterboxen sind untergeordnete Boxen eines Eltern-Elements bzw. einer Hauptblock-Box). Der vertikale Abstand zweier aneinander angrenzender Block-Boxen kann “zusammenbrechen” bzw. kollabieren, was bedeutet dass sie unter bestimmten Umständen eine gemeinsame Grenze besitzen. Auch die Grenze eines Nachkommenden Elements kann mit der des Eltern-Elements zusammenfließen. Zwei Boxen können aneinander grenzen, auch wenn sie in keiner Geschwisterbeziehung oder Eltern-Kind-Beziehung stehen.

Es ist auch darauf zu achten, dass in CSS 2.1 nur vertikale Abstände (im normalen Dokumentfluss) zusammenbrechen (für gefloatete oder absolut positionierte Elemente gibt es keine zusammenfallenden Abstände).

      <h3 style="margin-bottom:20px">Heading</h3>
      <p style="margin-top:10px">Text.</p>

Hier hat die Überschrift einen unteren Abstand von 20 Pixel und der Textabsatz einen oberen Abstand von 10 Pixel. Der Abstand zwischen Überschrift und Textabsatz beträgt nicht 30, sondern 20 Pixel. Warum? Die Abstände fallen zusammen.

Im einfachsten und gebräuchlichsten Fall mit zwei positiven Abständen, ist das Ergebnis ganz einfach der größte beider Abstände. (Zwei) Negative Abstände folgen dem gleichen Prinzip, ohne jetzt weiter in mathematische Details zu gehen.

Als weiteres Beispiel nehmen wir an, der Textabsatz im obigen Beispiel hätte einen negativen Abstand von 10 Pixel. Der zusammengefasste Abstand würde dann 20-10 = 10 Pixel betragen.

Abstände fallen nur zusammen, wenn sie direkt miteinander in Kontakt stehen. Gibt es ein Padding (Polster) oder eine Linie, fallen sie nicht zusammen.

Block-Box Dimensionen

Die Größe einer Block-Box ist von einer Reihe von Dingen abhängig. Ältere Versionen des Internet Explorer wenden diese Regeln falsch an, wodurch es zu einigen Problemen kommen kann. Modernere Browser gleichen diese Fehler durch den sogenannten “Quirks-Modus” aus, der von der Deklaration des Dokumenttyps am Anfang des Dokuments kontrolliert wird. Als Beispiel kann man sich den Artikel Mozilla’s DOCTYPE sniffing ansehen, der zeigt, wie Mozilla Browser entscheiden, welchen Regeln sie folgen. Andere Browser folgen ähnlichen Algorithmen.

Die CSS 2.1 Spezifikation besagt, dass die Breite (Höhe) einer Block-Box die Summe aus Breite (Höhe) des Inhaltsbereichs und der Breite (Höhe) ihrer horizontalen (vertikalen) Polster (padding) und Grenzen (Linien) ist. Abstände (margin) liegen außerhalb und bleiben deshalb unberücksichtigt bei Eigenschaften wie z.B. der Hintergrundfarbe (background-color).

Wir betrachten uns ein Element mit den folgenden CSS-Regeln:

      div#foo {
      width:200px;
      height:100px;
      padding:20px;
      border:10px solid #000;
      }

Die Breite der erzeugten Block-Box beträgt 200 + 20 + 20 + 10 + 10 = 260 Pixel, während die Höhe 100 + 20 + 20 + 10 + 10 = 160 Pixel ist. Es ist darauf zu achten, dass beide, die linken und rechten (und oberen und unteren) Werte für Polster (padding) und Linien berücksichtigt werden müssen.

Polster und die Breite der Linien werden somit zur Größe des Inhaltsereichs hinzuaddiert. Microsoft hat dies für ältere Versionen des Internet Explorer falsch interpretiert, indem sie die spezifizierten Breiten- und Höhenwerte als äußere Dimensionen der Block-Box angenommen haben und Polster (padding) sowie Linienbreiten abgezogen haben, um die Größe des Inhaltsbereichs zu berechnen. Wie bereits erwähnt, verhalten sich so auch moderne Browser im “Quirks-Modus”.

Die Regeln für Breite, Höhe und Abstände für verschiedene Typen von Elementen werden in der CSS 2.1 Spezifikation erklärt (Visual formatting model details). Diese ist nicht ganz einfach zu verstehen, leider ist es aber notwendig sie zu kennen, will man sich professionell mit Webdesign beschäftigen.

Die Tatsache, das dies nicht ganz einfach ist, zeigen auch die verschiedenen Interpretationsweisen der verschiedenen Browser. Speziell bei absolut positionierten Elementen.

Der letzte Teil dieser Serie beschäftigt sich damit, wie die Inline-Boxen funktionieren.