Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

3.4 Über Block- und Inline-Elemente

Wie Sie bereits gesehen haben, gibt es verschiedene Arten von HTML-Elementen, die sich unterschiedlich verhalten. Die beiden wichtigsten sind Block- und Inline-Elemente.

Block-Elemente werden so breit, wie es geht

Block-Elemente ähneln Absatzformaten in Word:

  • Der Kasten eines Block-Elements wird automatisch so breit, wie es geht.
  • Nachfolgende Elemente stehen unterhalb des Kastens in der nächsten Zeile.

Block-Elemente enthalten normalen Text, Inline-Elemente und manchmal auch andere Block-Elemente. Beispiele für Block-Elemente sind die Überschriften h1 bis h6, Fließtextabsätze mit p sowie die Listenelemente ul, ol und li, die Sie im Buch ab Seite 67 kennen lernen.

Inline-Elemente werden nur so breit wie ihr Inhalt

Inline-Elemente ähneln den Zeichenformaten aus Word:

  • Der Kasten eines Inline-Elements wird nur so breit wie sein Inhalt.
  • Nachfolgender Text fließt direkt nach dem Element weiter.

Inline-Elemente erzeugen keine neue Zeile und sind den Block-Elementen untergeordnet. Sie dürfen normalen Text und andere Inline- Elemente enthalten, aber keine Block-Elemente. Beispiele für Inline-Elemente sind strong und em sowie Hyperlinks (a) und Grafiken (img).

Block- und Inline-Elemente sichtbar machen

In Abbildung 3.2 sind die auf der Beispielseite bisher vorhandenen Block- und Inline-Elemente sichtbar gemacht worden und gekennzeichnet:

Abbildung 3.2: Block- und Inline- Elemente sichtbar gemacht
Abb. 3.2: Block- und Inline- Elemente sichtbar gemacht

In der Abbildung sehen Sie sehr deutlich, dass Block-Elemente so breit werden, wie es geht, Inline-Elemente nur so breit wie ihr Inhalt.

Falls Sie Abbildung 3.2 bei sich im Browser nachbauen möchten, benötigen Sie zunächst das Firefox-Add-on Web Developer Toolbar. Nach der Installation führen Sie dann die folgenden Schritte aus:

  1. Aktivieren Sie in der Web Developer Toolbar im Menü HERVORHEBEN ganz unten die Option ELEMENTNAMEN BEIM HERVORHEBEN EINBLENDEN.
  2. Um Block-Elemente hervorzuheben, wählen Sie im selben Menü die Option BLOCK-LEVEL-ELEMENTE HERVORHEBEN.
  3. Zur Hervorhebung der Inline-Elemente rufen Sie die Option BENUTZERDEFINIERTE ELEMENTE HERVORHEBEN… auf und tragen dort die Namen der gewünschten Elemente (z. B. strong oder em) ein.