Markup Webdesign Journal

(Aus dem englischen Original ins Deutsche übersetzt)

Das Thema sind Vierecke (Boxen) und dieser Artikel ist der erste in einer Serie von drei Artikeln. Gibt es wirklich so viel über Vierecke bzw. Boxen zu sagen? Glaubt es oder nicht, das Thema ist praktisch unerschöpflich.

Wir starten mit einem einfachen Vergleich beider Konzepte (Block und Inline) in HTML und CSS. Im zweiten Teil werden wir uns das Boxmodell ansehen, welches schon ziemlich bekannt und vertraut ist. Das spannende Finale in Teil drei wird sich schließlich mit den weniger vertrauten Details der Inline-Boxen beschäftigen.

Es ist darauf zu achten, dass diese Artikelserie einen strikten Dokumenttyp voraussetzen. Wir benutzen HTML bei allem, was mit Markup zu tun hat. Diese Angaben gelten gleich für HTML 4.01 strict, XHTML 1.0 strict und XHTML 1.1.

Block vs. Inline in HTML

In HTML gibt es zwei Typen von Elementen: Block-Level Elemente und Inline-Level Elemente. Die Standards sagen wenig darüber aus, wie diese Elemente vom Browser dargestellt bzw. verarbeitet werden sollten. Aber sie erwähnen, dass Block-Level Elemente generell in einer neuen Zeile starten. Im Gegensatz zu den Inline Elementen.

Alle Browser, selbst jene mit schlechter CSS-Unterstützung, haben eine standardmäßige Darstellung jedes Elementtyps. Block-Level Elemente werden mit einem ausdrücklichen Zeilenumbruch davor und danach übertragen bzw. dargestellt, während Inline Elemente dort angezeigt bzw. dargestellt werden, wo sie im Textfluss auftauchen. Somit ist es nicht möglich, ohne den Einsatz von CSS, zwei Block-Level Elemente nebeneinander darzustellen.

Die Definition des Dokumenttyps (DTD) legt fest, welche Elemente Block-Level oder Inline sind. Wir haben keine Möglichkeit, das zu beeinflussen.

Block-Level Elemente

Block-Level Elemente enthalten normalerweise - nicht immer - andere Elemente. Meistens haben sie somit die Funktion eines Containers.

Manche Block-Level Elemente dürfen nur andere Block-Level Elemente enthalten. Ein Beispiel hierfür sind Formulare (FORM). In strikten Dokumenttypen, darf der BODY nur andere Block-Level Elemente enthalten. Mit der Folge, dass Text nur in Absätze (P) oder andere Block-Level Elemente gepackt werden darf/muss.

Andere Block-Level Elemente dürfen nur Text und andere Inline Elemente (z.B. <i>) enthalten. Das bekannteste Beispiel ist das P-Tag (für Paragraph bzw. Absatz).

Eine dritte Kombination sind Block-Level Elemente, die andere Block-Level Elemente oder Inline Elemente einschließen können. Z.B. DIV (Division bzw. Bereich) und LI (Liste).

Inline-Level Elemente

Inline-Level Elemente markieren normalerweise die semantische Bedeutung von etwas, obwohl es auch einige rein Präsentationszwecken dienende Elemente gibt, die nach den neuesten Standards erlaubt sind. Ein Beispiel für ein semantisches Inline Element ist DFN (defining instance), welches die Definition eines Ausdrucks festlegt.

Inline-Level Elemente können normalerweise nur Text und andere Inline-Level Elemente enthalten. Die Ausnahme bildet der OBJECT-Elementtyp, der (als Inline-Level Element) tatsächlich Block-Level Elemente beinhalten kann.

Kamäleons

Einige wenige Elementtypen können mal als Block-Level Elemente agieren und an einer anderen Stelle als Inline Elemente auftauchen. Beispiele sind INS und DEL (eingefügte oder gelöschte Bereiche). Der Kontext bestimmt, ob sie als Inline oder Block Elemente behandelt werden, was wiederum bestimmt, was diese Elemente dann beinhalten dürfen. Wenn sie als Block-Level Elemente eingesetzt werden, können sie weitere Block-Level Elemente oder Inline Elemente enthalten. Sind sie Inline Elemente, dann dürfen sie, wie oben definiert, nur Text oder andere Inline Elemente enthalten.

Block vs. Inline in CSS

Die Bezeichnungen Block und Inline existieren auch in CSS, wo sie verwendet werden, um zwischen unterschiedlichen Arten von Boxen zu unterscheiden. Die nicht sichtbaren Boxen, die für die Präsentation der Seiten eingesetzt werden und andere Boxentypen, z.B. das Listenelement (LI), das wir in Teil 2 behandeln werden, die je nach Kontext Inline oder Block sein können, was in Teil 3 beschrieben wird.

Es gibt zudem noch einige andere Arten, die mit Tabellen und deren Bestandteilen zu tun haben. Diese werden allerdings in dieser Artikelserie nicht behandelt.

Normalerweise erzeugen Block-Level Elemente in HTML Blockboxen (Blöcke wie beispielsweise ganze Textabsätze), während Inline-Level Elemente Inline Boxen erzeugen (die deshalb nebeneinander stehen können).

Entgegengesetzt der HTML Klassifizierung von Block-Level- und Inline Elementen, kann man mit CSS bestimmen, welche Arten von Boxen erzeugt werden. Dies geschieht mit Hilfe der Display-Eigenschaft (z.B. display: inline;). Das bedeutet, dass es so möglich ist, ein Block-Level Element dazu zu bringen, eine Inlinebox zu erzeugen oder umgekehrt.

Ein beliebter Anfängerfehler besteht darin, zu denken, dass dies den Typ eines Elements ändert, anstatt vielmehr die Art (bzw. das Aussehen) wie die erzeugte Box dargestellt wird. So geben manche für ein SPAN-Tag display:block an und versuchen dann, ein P-Tag (Textabsatz) darin unterzubringen. Das ist nicht zulässig (Denkfehler: diplay:block -> Block-Level Element -> Block-Level Element darf man in Block-Level Element packen). Wie der Name schon sagt, dient die display-Eigenschaft lediglich dazu, die Präsentation des Elements zu kontrollieren.

Wie Inline zu Block wird

Was wir bisher über Boxtypen gesagt haben, gilt lediglich für Elemente im normalen Dokumentfluss. Elemente, die “gefloated” werden (die rechts oder links etwas anderem stehen sollen) oder absolut positioniert werden sollen (position: absolute oder position: fixed), halten sich an einen andere Art von Regeln. Sie erzeugen für gewöhnlich Block-Boxen, d.h. der errechnete Wert von “display” ist block (-> display: block).

Für ein fließendes, absolut positioniertes Element wird die Display-Eigenschaft normalerweise ignoriert. Mit einer bestehenden Ausnahme, die wir uns als nächstes ansehen.

Ãœberhaupt keine Box

Ein Spezialfall besteht darin, wenn wir für display den Wert “none” angeben. Das Element erzeugt dann überhaupt keine Box. Es existiert hier faktisch keine Box. Der Unterschied ist wichtiger, als es zunächst den Anschein hat.

Für ein Element mit dem Display-Wert “none”, werden alle Float- und Position-Eigenschaften ignoriert.

Da für ein Element mit display:none keine Box erzeugt wird, ist es nicht möglich seine weiteren enthaltenen Elemente sichtbar zu machen. Dazu folgendes Beispiel:

      <div style="display: none">
        <p style="display: block">Text</p>
      </div>

Man könnte denken, dass dies (display:block) den Textabsatz sichtbar machen würde. Aber das ist nicht der Fall. Sobald das übergeordnete Element (<div>) keine Box erzeugt (also unsichtbar sein soll), werden die untergeordneten Elemente (<p>) ebenfalls nicht angezeigt. (Unabhängig davon, was für diese angegeben wird).

Der zweite Teil dieser Artikelserie wird sich mit den Block-Boxen und deren Eigenschaften beschäftigen.