Inline-Elemente

Inline-Elemente sind für Teile eines Textes gedacht. Sie sitzen zwischen den Wörtern in einer Zeile und sind genau so breit und so hoch wie ihr Inhalt. Deshalb haben die Eigenschaften width und height keine Wirkung auf sie, und der obere und untere Außenabstand ebenso wenig. Außenabstände links und rechts funktionieren wie gewohnt.

Bilder sind eine Ausnahme. Vielleicht ist dir aufgefallen, dass width beim Foto funktioniert hat, obwohl es inline war. Bilder sind sogenannte ersetzte Elemente (replaced elements): Ihr Inhalt kommt von außerhalb der Seite (aus der Bilddatei), und der Browser bemisst sie wie Boxen, auch wenn sie inline sind.

HTML hat auch ein Inline-Element ohne eigene Bedeutung: span. Es ist das Inline-Gegenstück zu div. Wir verwenden es, um einen Teil eines Textes zu umschließen, den wir gestalten wollen:

<p>Preis: <span class="preis">10 €</span></p>

Mit display: inline können wir aus einem Block-Element ein Inline-Element machen. So entsteht ein einfaches Menü: Listeneinträge (li) stehen normalerweise untereinander, aber wenn sie inline sind, reihen sie sich wie Wörter in einer Zeile auf.

Listeneinträge haben eigentlich standardmäßig einen besonderen Wert für display: list-item. Sie verhalten sich wie Blöcke, aber mit einem Aufzählungszeichen. Wenn wir sie inline machen, verschwinden die Aufzählungszeichen.