Html Leerzeichen: warum die Leertaste im Quellcode lügt
Sie tippen im Code drei Leerzeichen zwischen zwei Wörter. Der Browser zeigt eines. Ich saß vor ein paar Jahren an einem Impressum, in dem die Telefonnummer partout nicht so aussehen wollte wie im Designentwurf, und ich habe bestimmt zwanzig Minuten damit verbracht, im Quelltext Leerzeichen hin und her zu schieben. Bis mir jemand sagte: HTML kennt keine mehrfachen Leerzeichen. Klingt banal, ist aber die Ursache für einen ganzen Haufen nerviger Layout-Fehler.
Die Regel dahinter ist simpel. Der HTML-Parser fasst jede Folge von Whitespace-Zeichen — Leerzeichen, Tabs, Zeilenumbrüche — zu einem einzigen Leerzeichen zusammen. Das ist gewollt, denn so bleibt Code lesbar, ohne dass die Einrückung im Browser landet. Nur: Wenn Sie bewusst mehrere Leerzeichen oder einen geschützten Abstand brauchen, müssen Sie dem Browser explizit sagen, was Sie meinen. Genau darum geht es hier.
Wichtige Erkenntnisse
- Mehrere Leerzeichen im Quellcode werden vom Browser grundsätzlich auf eines reduziert.
- Das nicht umbruchfähige Leerzeichen heißt , ist eine geschützte Einheit und verhindert einen Zeilenumbruch an dieser Stelle.
- Für feinere Abstände gibt es  ,   und   mit unterschiedlichen Breiten.
- Für echte Blöcke mit Leerzeichen und Umbrüchen ist CSS mit white-space meist die sauberere Wahl als Entitäten im Text.
- Zu viel kann auf schmalen Bildschirmen zu horizontalem Überlaufen führen — sparsam einsetzen.
Html Leerzeichen einfügen: die Entitäten im Überblick
Wenn Sie ein Leerzeichen erzwingen wollen, das der Browser nicht wegoptimiert, greifen Sie zu einer sogenannten Entität. Das ist ein Kürzel, das mit einem kaufmännischen Und beginnt und mit einem Semikolon endet. Das Semikolon vergesse ich übrigens selbst heute noch gelegentlich — dann zeigt der Browser den Code als Text an, und man sucht den Fehler an der falschen Stelle.
Die gebräuchlichste Entität ist , das non-breaking space. Der Name verrät schon die zweite Funktion: Der Browser darf an dieser Stelle keinen Zeilenumbruch setzen. Genau deshalb klebt man damit Einheiten zusammen, etwa „10 MB" oder „Dr. Müller".
Welche Leerzeichen-Entitäten gibt es und wie breit sind sie?
Neben existieren einige Geschwister mit anderen Breiten. Die Werte sind relativ zum Schriftgrad definiert, weshalb die Pixelangabe je nach Schriftart und Größe schwankt — bei einer 16-Pixel-Standardschrift ergibt sich aber eine brauchbare Größenordnung.
| Entität | Bedeutung | Breite (relativ) | Ungefähr in px bei 16px | Typischer Einsatz |
|---|---|---|---|---|
| | geschütztes Leerzeichen | wie ein normales Leerzeichen | ca. 4–5 px | Einheiten, Abkürzungen, Telefonnummern |
|   | schmales Leerzeichen | ca. 1/5 Geviert | ca. 3 px | feine Trennung, Zahl + Einheit |
|   | halbes Geviert | ca. 1/2 Geviert | ca. 8 px | größere Trennung innerhalb einer Zeile |
|   | ganzes Geviert | ca. 1 Geviert | ca. 16 px | sichtbarer Abstand, selten im Fließtext |
Ein Hinweis, den ich lange nicht auf dem Schirm hatte: lässt sich auch als numerische Referenz   schreiben. Beide Formen sind identisch, die numerische Variante ist manchmal praktisch, wenn man mit Zeichensätzen oder Generatoren arbeitet, die mit benannten Entitäten nichts anfangen können.
Html Leerzeile und Html-Zeilenumbruch: zwei verschiedene Dinge
„Ich will eine Leerzeile." Diesen Satz höre ich oft, und meistens ist damit etwas ganz anderes gemeint als das, was die Person tut. Denn im HTML gibt es zwei grundverschiedene Konzepte, die im Alltag ständig durcheinandergeworfen werden.
Html Absatz: der saubere Weg zum Abstand
Wenn Sie Text in getrennte Absätze gliedern wollen, nehmen Sie schlicht das <p>-Element. Jeder Absatz bekommt vom Browser automatisch einen Abstand nach oben und unten. Das ist der semantisch korrekte Weg zu einer Leerzeile. Kein Trick, kein Sonderzeichen.
Html Zeilenumbruch mit <br> — und was damit zu tun hat
Ein <br> erzwingt einen einzelnen Zeilenumbruch innerhalb eines Absatzes, ohne einen neuen Block zu beginnen. Es erzeugt aber keinen zusätzlichen Abstand. Wer „<br><br>" schreibt, um eine leere Zeile zu simulieren, baut sich schnell ein Konstrukt, das bei jedem Designwechsel zerbricht.
Der Klassiker unter den Missverständnissen: als Zeilenumbruch zu verwenden. Tut es nämlich nicht — im Gegenteil. Ein verhindert den Umbruch an genau dieser Stelle. Damit erzeugen Sie das Gegenteil eines Umbruchs. Ein einzelnes, in eine eigene Zeile gesetztes wirkt lediglich wie ein Platzhalter, damit ein leeres Element nicht ganz zusammenfällt. Das ist ein Notbehelf, kein Werkzeug für echtes Layout.
CSS Leerzeichen: wann Sie besser auf CSS setzen
Und hier wird es interessant. Ehrlich gesagt: Die meisten Fälle, in denen früher drei hintereinander im Quelltext standen, löse ich heute mit CSS. Es ist wartbarer, und es zerbricht nicht beim Umbau des Layouts.
white-space richtig einsetzen
Die Eigenschaft white-space steuert, wie der Browser mit Whitespace im Markup umgeht. Vier Werte sind relevant für die Praxis:
- normal — der Standard. Mehrfache Leerzeichen und Umbrüche werden auf eines reduziert.
- nowrap — kein Umbruch, auch nicht über den Rand hinaus. Vorsicht auf mobilen Geräten.
- pre — Whitespace wird erhalten, aber es gibt keinen automatischen Umbruch.
- pre-wrap — erhält Leerzeichen und bricht um, wenn die Zeile zu lang wird. Für die meisten Zwecke die nützlichste Variante.
Ein konkretes Beispiel aus meiner Arbeit: In einem kleinen Formular sollten Nutzer mehrzeilige Notizen eingeben, und deren Einrückung und Leerzeilen sollten später auch in der Ausgabe sichtbar bleiben. Mit wäre das ein einziges Gefrickel geworden. Stattdessen habe ich der Ausgabe ein `white-space: pre-wrap;` verpasst — zwei Zeilen CSS statt dutzender Entitäten quer über den Text verteilt.
word-spacing und letter-spacing für Feintuning
Wenn Sie den Abstand zwischen Wörtern global vergrößern oder verkleinern wollen, nehmen Sie word-spacing. Für den Abstand zwischen Buchstaben — etwa bei gesperrten Überschriften — ist letter-spacing zuständig. Achtung: Beide wirken auf den gesamten ausgewählten Bereich. Wenn Sie nur einen einzigen Abstand an einer bestimmten Stelle brauchen, ist eine Entität immer noch das schlankere Mittel.
Mehrere Leerzeichen und die unangenehmen Nebeneffekte
Ich habe eine Zeit lang gedankenlos gestreut, wo es nur ging, um Abstände „exakt" zu treffen. Das ging gut, bis ich die Seite auf einem Smartphone aufrief. Und dann?
Der Text lief horizontal aus dem Bildschirm heraus. Grund: Eine Kette von geschützten Leerzeichen kennt keine Umbruchstelle. Der Browser hatte schlicht keinen Punkt gefunden, an dem er hätte umbrechen können. Das Ergebnis war ein horizontaler Scrollbalken — auf kleinen Displays der schnellste Weg, einen Leser zu verlieren.
Zwei weitere Punkte, die selten erwähnt werden:
- Barrierefreiheit: Ein Haufen wird von manchen Screenreadern als eine lange, unnatürliche Pause vorgelesen. Für reinen Abstand sind Entitäten also nicht nur unnötig, sondern manchmal störend.
- Auswahl und Kopieren: Bei einem übermäßigen Einsatz von oder umbruchfreien Konstrukten kann das Markieren und Kopieren von Text in manchen Browsern seltsame Ergebnisse liefern — die Leerzeichen springen oder fehlen. Nichts, was Ihre Seite unbrauchbar macht, aber unschön.
Mein Fazit aus diesen Erfahrungen: Nutzen Sie für das, wofür es gemacht ist — das Verhindern eines Umbruchs an einer bestimmten, inhaltlich sinnvollen Stelle. Nicht als Ersatz für Padding, Margin oder eine gescheite Absatzstruktur. Für alles Layout-bezogene ist CSS die klar bessere Wahl.
Häufige Fragen zu Html-Leerzeichen
Wie füge ich in Html mehrere Leerzeichen ein?
Mehrere Leerzeichen hintereinander geben Sie entweder mit einer Kette von -Entitäten aus — für jeden gewünschten Abstand eine. Sauberer wird es in vielen Fällen aber mit CSS: white-space: pre-wrap auf dem umgebenden Element, oder word-spacing, wenn es um den gesamten Bereich geht. Für einen einzelnen, breiteren Abstand an einem festen Punkt ist aber weiterhin die einfachste Lösung.
Was ist der Unterschied zwischen und einem normalen Leerzeichen?
Ein normales Leerzeichen aus der Leertaste darf an dieser Stelle umgebrochen werden — der Browser verschiebt das nachfolgende Wort in die nächste Zeile, wenn die Zeile voll ist. Ein ist geschützt und verhindert genau das. Zusätzlich wird es nie zu einem einzelnen Leerzeichen komprimiert, auch wenn daneben weitere stehen.
Warum zeigt mein Browser meine Leerzeichen nicht an?
Weil er sie bewusst zusammenfasst. Mehrere aufeinanderfolgende Whitespace-Zeichen im Quellcode werden standardmäßig zu einem einzigen gerenderten Leerzeichen reduziert — so bleiben eingerückter Code und gut lesbares Markup möglich. Wenn Sie den Rohzustand erhalten wollen, greifen Sie zu white-space mit dem Wert pre oder pre-wrap.
Was ich Ihnen mitgeben würde
Nach Jahren des Herumschiebens von Leerzeichen bleibt bei mir ein Satz hängen: HTML ist für Inhalt zuständig, CSS für Aussehen. Wer diese Trennung ernst nimmt, greift selten zu — aber wenn doch, dann mit Absicht. Ein Abstand, der inhaltlich zusammengehört, darf nicht umbrechen. Ein Abstand, der nur hübsch aussehen soll, gehört ins Stylesheet. Die Telefonnummer im Impressum? Da darf heute noch ein rein. Alles andere darf CSS machen.
