Drei Leerzeichen. Ich tippe sie in den Code, speichere, lade die Seite neu – und im Browser steht da: ein Leerzeichen. Vielleicht. Wenn überhaupt. Das war der Moment, in dem ich zum ersten Mal so richtig verstanden habe, warum HTML-Leerzeichen für viele am Anfang wie ein kleiner Betrug wirken. Sie tun nicht das, was man ihnen sagt.
Das Ding ist: HTML ist keine Textverarbeitung. Der Browser bekommt eine Anweisung, Inhalte darzustellen, und die Regel Nummer eins dabei lautet, mehrere aufeinanderfolgende Leerzeichen, Tabs und Zeilenumbrüche im Quellcode zu einem einzigen Leerzeichen zusammenzufassen. Das ist kein Bug, das ist Whitespace-Kollaps, und er hat mir am Anfang mehr Zeit geraubt als jede kaputte CSS-Datei. Wenn Sie also gezielt Abstände, Einrückungen oder einen erzwungenen Zeilenumbruch brauchen, müssen Sie HTML dazu überreden. Wie das geht – und wann Sie es besser lassen – darum geht es hier.
Wichtige Erkenntnisse
- Mehrere Leerzeichen im Quellcode werden vom Browser zu einem einzigen zusammengefasst.
- erzeugt ein geschütztes Leerzeichen, das keinen Zeilenumbruch zulässt – ideal für „10 kg" oder Telefonnummern.
- Für breitere oder schmalere Abstände gibt es  ,   und  , die aber je nach Schrift unterschiedlich ausfallen.
- Für Layout-Abstände ist CSS (
margin,padding,word-spacing) fast immer die bessere Wahl als gestapelte Leerzeichen-Entitäten. - Zu viele in einem Text können auf schmalen Displays zu Überläufen führen und Screenreader unnötig aufhalten.
Wie Sie in HTML ein Leerzeichen erzwingen
Der schnellste Weg zu einem sichtbaren, nicht kollabierenden Leerzeichen ist die Entität . Steht sie im Code, rendert der Browser an dieser Stelle ein Leerzeichen – und zwar egal, wie viele Leerzeichen drumherum sonst noch stehen. Ich nutze sie am häufigsten in kurzen, heiklen Stellen: zwischen Zahl und Einheit, in Firmennamen, die nicht umbrechen sollen.
Ein Beispiel aus meinem Alltag. Auf einer Produktseite hatte ich ursprünglich geschrieben:
<p>Versandkosten: 4,90 €</p>
Auf einem schmalen Smartphone brach der Browser die Zeile genau zwischen „4,90" und „€" um. Der Euro hing allein in der nächsten Zeile. Sieht aus wie ein Fehler, ist aber nur der Whitespace-Kollaps, der hier gnädig war. Mit einem geschützten Leerzeichen bleibt das zusammen:
<p>Versandkosten: 4,90 €</p>
Die wichtigsten Leerzeichen-Entitäten im Vergleich
Es gibt nicht „das" HTML-Leerzeichen. Es gibt eine kleine Familie, und jede hat ihre Berechtigung:
| Entität | Name | Breite (ca.) | Typischer Einsatz |
|---|---|---|---|
| geschütztes Leerzeichen | normal | Zeilenumbruch verhindern, Zahl + Einheit |
  | Halbgeviert-Leerzeichen | halbe Geviertbreite | typografische Feinarbeit |
  | Geviert-Leerzeichen | volle Geviertbreite | größere Abstände innerhalb einer Zeile |
  | schmales Leerzeichen | sehr schmal | Tausendertrennung, Feinabstände |
Ehrlich gesagt:   ist der Kandidat, bei dem ich am häufigsten in die Falle getappt bin. Auf meinem alten Laptop sah es sauber aus. Auf älteren Android-Geräten in meinem Testpool wurde es oft breiter gerendert als beabsichtigt oder in einer schmalen Schrift kaum sichtbar. Wenn Sie präzise Abstände brauchen, prüfen Sie das auf echten Geräten – nicht nur im Desktop-Browser.
Wie mache ich ein schmales Leerzeichen?
Das schmale Leerzeichen schreiben Sie als   in den HTML-Code. Es eignet sich für Trennungen, bei denen ein normales Leerzeichen zu breit wirkt, etwa bei Zahlen wie 1 000 000. In der deutschen Typografie wird der Tausendertrenner oft als schmales, geschütztes Leerzeichen gesetzt – als Unicode-Zeichen U+202F. In HTML schreiben Sie das als  .
Klingt fein, ist es auch. Aber: Verlassen Sie sich nicht darauf, dass jeder Browser das exakt gleich breit darstellt. Ich habe eine Testseite mit fünf Entitäten nebeneinander gebaut und auf vier Browsern verglichen – die Unterschiede sind klein, aber sichtbar. Wenn Typografie für Sie kritisch ist, testen Sie es, bevor Sie es produktiv einsetzen.
Was ist der Code für Leerzeichen?
Der gebräuchlichste Code für ein erzwungenes Leerzeichen ist . Er ist eine HTML-Entität und steht für „non-breaking space". Alternativ funktioniert die numerische Schreibweise   – beides erzeugt dasselbe Zeichen. In CSS schreiben Sie stattdessen content: "\00a0";, wenn Sie ein Leerzeichen über ein Pseudoelement einfügen wollen.
Wichtig: Das Semikolon am Ende gehört dazu. Ich habe mal eine halbe Stunde damit verbracht, einen Fehler zu suchen, weil ich   ohne Semikolon geschrieben hatte. Der Browser hat es stillschweigend ignoriert und den Text einfach zusammengeklebt. Kein Fehler in der Konsole, keine Warnung. Nur ein fehlender Abstand.
Was bedeutet
?
Zwei <br />-Tags hintereinander erzeugen im HTML einen erzwungenen Zeilenumbruch und direkt danach eine Leerzeile. Genauer: Der erste Umbruch beendet die aktuelle Zeile, der zweite fügt eine neue, leere Zeile ein. Das ist der einfachste Weg, in HTML eine Leerzeile zwischen zwei Absätzen zu erzeugen, ohne ein neues <p>-Element aufzumachen.
Ob das sinnvoll ist, hängt vom Kontext ab. In einem Gedicht oder einer Adresse ist ein doppelter Zeilenumbruch oft die pragmatischste Lösung. In einem Fließtext würde ich ihn dagegen vermeiden und stattdessen mit <p>-Elementen und CSS-Abständen arbeiten. Zwei <br /> hintereinander sind ein bisschen wie ein doppelter Espresso: wirkt schnell, aber manchmal wäre ein ordentlicher Schlaf besser.
Zeilenumbrüche und Leerzeichen richtig kombinieren
Die Kombination aus <br /> und wird in der Praxis oft verwechselt. Kurz gesagt:
<br />erzeugt einen Zeilenumbruch – keinen Leerraum zwischen Zeichen. erzeugt ein Leerzeichen – aber keinen Zeilenumbruch.- Ein einzelnes
<br />direkt nach einem Leerzeichen kann dazu führen, dass die Zeile mit einem überflüssigen Abstand beginnt. - Für Einrückungen ist keines von beiden gedacht – dafür nutzen Sie
padding-leftodermargin-left.
Ich habe mal eine Tabelle mit sieben -Zeichen eingerückt, weil ich zu faul für CSS war. Auf dem Desktop sah es ordentlich aus. Auf einem Tablet brach die gesamte Zelle um, weil der Browser die langen geschützten Blöcke nicht trennen konnte. Seitdem gilt bei mir: Einrückung ist Aufgabe von CSS, nicht von Leerzeichen-Entitäten.
Wann HTML-Leerzeichen wirklich sinnvoll sind
Nicht jedes Leerzeichen muss erzwungen werden. Manchmal ist die beste Lösung, gar keines zu setzen. Ich nutze geschützte Leerzeichen nur in drei Situationen:
- Zwischen Zahl und Einheit, damit „5 kg" nicht auseinandergerissen wird.
- In Telefonnummern, damit die Vorwahl nicht am Zeilenende hängt.
- Bei Markennamen wie „Adobe Photoshop", die als Einheit gelten sollen.
Für alle anderen Fälle greife ich lieber zu CSS. word-spacing eignet sich, wenn ich den Abstand zwischen allen Wörtern in einem Element vergrößern will. white-space: pre erhält sämtliche Leerzeichen aus dem Quellcode, was bei Gedichten oder Codeblöcken praktisch ist. Und für Abstände im Layout sind margin und padding fast immer die sauberere Wahl.
Der häufigste Fehler: zu viele geschützte Leerzeichen
Ein geschütztes Leerzeichen verhindert einen Zeilenumbruch – das ist seine Aufgabe. Wenn Sie aber einen ganzen Satz mit durchsetzen, kann der Browser nirgends umbrechen. Auf einem schmalen Smartphone läuft der Text dann aus dem Container, und Sie wundern sich, warum Ihre Seite horizontal scrollt. Ich habe diese Diagnose schon mehrfach bei Projekten gestellt, und fast immer lag es an einer Handvoll in einem Fließtextabsatz.
Ein weiterer Punkt, den viele unterschätzen: Screenreader lesen manchmal als eigenständiges Zeichen oder mit einer kurzen Pause vor. Wenn Sie also einen Text für Barrierefreiheit optimieren, sollten Sie geschützte Leerzeichen sparsam einsetzen.
Was am Ende wirklich zählt
HTML-Leerzeichen sind kein Zufall und keine Marotte der Browser-Hersteller. Sie folgen einer Regel: Leerraum im Quellcode ist für die Darstellung irrelevant, es sei denn, Sie markieren ihn ausdrücklich als relevant. tut genau das – nicht mehr, aber auch nicht weniger.
Die Versuchung, mit einer Handvoll Entitäten das Layout zu retten, ist groß. Ich kenne sie aus eigener Erfahrung. Aber die saubere Lösung ist fast immer CSS. Wenn Sie also das nächste Mal vor einem Layout-Problem stehen, fragen Sie sich zuerst: Brauche ich wirklich ein Leerzeichen – oder brauche ich einen Abstand? Das ist nicht dasselbe. Und der Unterschied entscheidet oft darüber, ob Ihre Seite auf dem nächsten Gerät funktioniert, das Sie nicht getestet haben.
