Inline-Elemente stehen mitten im Text und sind nur so breit wie ihr Inhalt. Sie unterbrechen den Lesefluss nicht.
- Inline-Element
Element, das innerhalb einer Textzeile steht und nur so viel Platz einnimmt, wie sein Inhalt braucht.
Beispiel: „Ein Inline-Element beginnt keine neue Zeile.“
Welche das sind
Der Link, die beiden Hervorhebungen, das Bild, der allgemeine Behälter span. Sie zeichnen Teile eines Satzes aus, ohne ihn zu unterbrechen.
Was sich daran nicht einstellen lässt
Breite und Höhe wirken bei reinen Inline-Elementen nicht, ebenso wenig die senkrechten Abstände: Ein oberer Abstand schiebt die Zeile darüber nicht weg. Das überrascht regelmäßig bei Links, die als Schaltfläche aussehen sollen.
Der übliche Weg führt über die CSS-Eigenschaft für die Darstellungsart. Mit dem Zwischenwert für beides bleibt das Element im Textfluss und nimmt trotzdem Breite, Höhe und Innenabstand an.
Das Bild als Sonderfall
Ein Bild ist inline und nimmt trotzdem Breite und Höhe an. Der Grund ist, dass sein Inhalt aus einer anderen Datei stammt und eigene Maße mitbringt. Solche Elemente verhalten sich in diesem Punkt wie Blöcke, bleiben aber im Textfluss.
Daher kommt auch die kleine Lücke unter einem Bild in einem Behälter: Das Bild sitzt auf der Grundlinie der Textzeile, und darunter bleibt der Platz für Unterlängen. Wer sie loswerden will, stellt die Ausrichtung um oder macht das Bild zum Block.
Das Leerzeichen zwischen ihnen
Weil Inline-Elemente im Textfluss stehen, zählt der Zeilenumbruch im Quelltext als Leerzeichen. Zwischen zwei untereinander geschriebenen Links steht deshalb eine Lücke, die im Markup nicht sichtbar ist.