Es gibt einen Moment in jedem Web-Projekt, in dem man sich denkt: „Ich habe doch nur ein Leerzeichen eingefügt. Warum interessiert das den Browser nicht?" Bei mir war es ein Telefonnummernblock in einem Footer, der auf dem Desktop sauber aussah und auf dem Handy plötzlich mitten in der Vorwahl umbrach. Ich habe damals zwanzig Minuten damit verbracht, im Quellcode Leerzeichen zu zählen, bis mir einfiel, was HTML mit mehreren Leerzeichen eigentlich macht.
Die kurze Antwort: HTML ignoriert alles, was über ein einzelnes Leerzeichen hinausgeht. Fügen Sie im Editor zehn Leerzeichen zwischen zwei Wörtern ein, zeigt der Browser genau eines an. Der Grund liegt im Whitespace-Collapsing des Parsers: aufeinanderfolgende Leerraumzeichen (Leerzeichen, Tabs, Zeilenumbrüche) werden zu einem einzigen zusammengefasst. Das ist kein Bug, sondern eine bewusste Entscheidung, die das HTML-Quellformat unabhängig von der Darstellung macht.
Wer trotzdem mehr Abstand braucht, hat mehrere Wege — und die sind nicht alle gleich gut. Genau darum geht es hier.
Wichtige Erkenntnisse
- Mehrfache Leerzeichen im Quelltext verschwinden bei der Anzeige — HTML reduziert sie auf eines.
- erzeugt ein geschütztes Leerzeichen, das nicht umbricht, aber die Barrierefreiheit und den Zeilenfluss belasten kann.
- Für Layout-Abstände ist CSS die richtige Ebene: white-space, word-spacing, gap oder schlicht margin.
- Unsichere Zeilenumbrüche (Telefonnummern, Zahl mit Einheit) löst man besser mit white-space: nowrap als mit einer Kette von .
- Jedes Leerzeichen im HTML hat eine Funktion — entweder als Trenner im Fließtext oder als reines Styling, das eigentlich nach CSS gehört.
html leerzeichen: Warum der Browser mehrfache Leerzeichen ignoriert
Schauen Sie sich eine typische Webseite im Quelltext an. Zwischen den Tags stehen Unmengen an Zeilenumbrüchen und Einrückungen, die niemand im Browser sieht. Dieses Aufräumen nennt sich Whitespace-Collapsing, und es passiert in zwei Stufen: erst beim Parsen, dann beim Rendern.
Was genau passiert mit mehreren Leerzeichen?
Der HTML-Parser liest den Textknoten, ersetzt jede Folge von Leerraumzeichen durch ein einzelnes Leerzeichen und verwirft Leerraum am Anfang und Ende eines Blocks. Aus <p>Hallo Welt</p> wird also schlicht „Hallo Welt". Das gilt für Leerzeichen, Tabulatoren und Zeilenumbrüche gleichermaßen — HTML unterscheidet im Fließtext nicht zwischen ihnen.
Klingt einschränkend, ist aber praktisch: Sie können Ihren Quelltext beliebig umbrechen, ohne das Ergebnis zu verändern. Für die Lesbarkeit des Codes ist das ein Segen. Für Ihre Absicht, drei Leerzeichen einzufügen, ein Ärgernis.
Und was ist mit der Leerzeile im Quelltext?
Auch hier: nichts Sichtbares. Eine Leerzeile im HTML erzeugt keine vertikale Lücke auf der Seite. Wer einen Absatzabstand will, nimmt <p> mit entsprechendem margin oder eine CSS-Regel — nicht zwei Zeilenumbrüche hintereinander. Das ist einer der häufigsten Anfängerfehler, und ich habe ihn selbst eine ganze Weile gemacht, bis mir ein Kollege den Unterschied zwischen Quelltext und Darstellung erklärte.
nbsp und andere HTML-Entities für Leerzeichen
Wenn Sie mehr Abstand brauchen und kein CSS anfassen wollen, gibt es die klassischen HTML-Entities. Sie sind alle klein geschrieben, enden mit einem Semikolon und werden vom Browser als echtes Zeichen interpretiert.
| Entity | Bezeichnung | Ungefähre Breite | Typischer Einsatz |
|---|---|---|---|
| geschütztes Leerzeichen | ≈ 0,25 em | Zahl + Einheit, Abkürzung + Name |
  | schmales Leerzeichen | ≈ 0,167 em | Tausendertrennung, feine Abstände |
  | Halbgeviert-Leerzeichen | ≈ 0,5 em | mittlerer Abstand zwischen Wörtern |
  | Geviert-Leerzeichen | ≈ 1 em | deutlicher Abstand, Einrückung |
Ehrlich gesagt: Die Breitenangaben sind Richtwerte. Wie breit ein   tatsächlich dargestellt wird, hängt von der Schrift ab — nicht jede Schrift implementiert alle Leerraumzeichen gleich sauber. In einer Testreihe mit vier verschiedenen Systemschriften habe ich Unterschiede von bis zu einem Drittel gesehen. Wer pixelgenaue Abstände braucht, sollte ohnehin nicht mit Entities arbeiten.
html leerzeichen einfügen: so geht der geschützte Abstand
Am häufigsten begegnet Ihnen in zwei Situationen: bei Zahl und Einheit („10 kg") und bei mehrteiligen Namen oder Abkürzungen, die zusammengehalten werden sollen. Der Effekt: Das Leerzeichen darf nicht als Zeilenumbruch verwendet werden. Steht das Wort am Zeilenende, rutscht das folgende Element mit in die nächste Zeile, statt getrennt zu werden.
- Zahl plus Einheit — „42 GB" bleibt zusammen.
- Titel und Name — „Dr. Müller" wird nicht getrennt.
- Telefonnummern — nützlich, aber mit Vorsicht, dazu unten mehr.
- Paragrafenzeichen und Paragraph — „§ 5" ist streng genommen korrekt typografiert.
Die Sache mit dem Kopieren und Vorlesen
Hier kommt der Punkt, den die meisten Erklärungen weglassen: ist ein eigenes Unicode-Zeichen (U+00A0), kein normales Leerzeichen. Wenn ein Besucher den Text markiert und kopiert, landet dieses Zeichen in der Zwischenablage. In einer Textverarbeitung sieht das meistens unspektakulär aus. In einem Suchfeld, einer Datenbank oder einem Code-Editor kann es zum Problem werden — etwa wenn jemand die kopierte Telefonnummer in ein Formular einfügt und der Server die Ziffern wegen des geschützten Leerzeichens nicht erkennt.
Bei Screenreadern verhält es sich ähnlich uneinheitlich: Manche lesen U+00A0 als reguläre Wortgrenze, andere hängen Wörter zusammen, manche geben gar nichts aus. Verlassen Sie sich nicht darauf, dass es überall gleich funktioniert.
html mehrere leerzeichen einfügen: mit CSS statt Entities
Wenn Sie wirklich mehrere Leerzeichen sichtbar machen wollen — zum Beispiel in einem Code-Beispiel, einem Gedicht oder einer Adressangabe mit fester Einrückung — dann ist CSS die saubere Lösung. Das mache ich inzwischen konsequent so, und ich würde behaupten: Das ist der einzige Ansatz, der langfristig hält.
white-space: pre und pre-wrap
Die CSS-Eigenschaft white-space: pre schaltet das Collapsing ab. Alles, was Sie im Quelltext an Leerraum tippen, wird genau so angezeigt. Der Haken: Auch Zeilenumbrüche bleiben stehen, und lange Zeilen laufen über den Container hinaus. pre-wrap verhält sich ähnlich, bricht aber zusätzlich am Rand um — für die meisten Fälle die bessere Wahl.
Ein typischer Anwendungsfall: eine Anschrift mit hartem Zeilenumbruch, bei der Sie nicht mit <br> arbeiten wollen.
word-spacing, letter-spacing und gap
Wenn Sie nur den Abstand zwischen Wörtern vergrößern wollen, ist word-spacing die richtige Eigenschaft. Für den Abstand zwischen Buchstaben gibt es letter-spacing — aber Vorsicht, das wird schnell unleserlich. Und für Abstände zwischen Elementen sind margin, padding und in Flexbox oder Grid gap die Werkzeuge der Wahl. Wer ein Layout mit zusammenschiebt, hat am Ende eine fragile Konstruktion, die bei jeder Schriftänderung auseinanderfällt.
Eine kleine Gegenüberstellung, weil ich diese Entscheidung oft sehe:
| Ziel | Besser mit | Schlechter mit |
|---|---|---|
| Abstand zwischen Wörtern | word-spacing | Ketten von |
| Zeilenumbruch verhindern | white-space: nowrap | überall |
| Vertikaler Abstand | margin / padding / gap | Leerzeilen und <br> |
| Einrückung in Code | <pre> oder white-space: pre | viele   |
Die häufigsten Fallen im Alltag
Ich habe über die Jahre eine ganze Sammlung an Fehlern zusammengetragen, die alle mit Leerzeichen zu tun haben. Drei davon sind mir besonders hängengeblieben.
- Geschützte Leerzeichen in responsiven Layouts. Ein „15 km" ist harmlos. Ein ganzer Satz mit geschützten Leerzeichen kann auf schmalen Displays aber nicht mehr umbrechen und schiebt sich aus dem Container heraus. Ich habe einmal eine Tabelle mit
overflow-Problemen debuggt, und die Ursache war eine unscheinbare Zeile mit . - URL-Leerzeichen. In einer URL haben Leerzeichen nichts verloren. Wer eine Adresse mit Leerzeichen in den
hrefschreibt, bekommt einen kaputten Link — Browser kodieren das Leerzeichen zwar oft stillschweigend als%20, aber verlassen Sie sich nicht darauf. Besser: Bindestriche verwenden und Sonderzeichen kodieren. - Zeilenumbrüche als Abstandsersatz. Zwei
<br>hintereinander sehen im Quelltext wie ein Absatz aus, sind aber im Sinne der Semantik keiner. Wer das barrierefrei haben will, nutzt<p>mit margin.
Fazit
Leerzeichen in HTML sind ein kleines Thema mit erstaunlich vielen Stolpersteinen. Die Regel ist simpel: Für den Textfluss reicht ein normales Leerzeichen, für den Zusammenhalt sorgt nur in Ausnahmefällen, und alles, was über reines Layout hinausgeht, gehört ins CSS.
Der Satz, den ich mir vor Jahren hätte an die Wand hängen sollen: Wenn Sie im Quelltext Leerzeichen zählen, machen Sie vermutlich etwas falsch. Nicht immer — es gibt legitime Fälle für und  . Aber in neun von zehn Fällen, in denen ich früher zur Entity gegriffen habe, wäre eine Zeile CSS die bessere Antwort gewesen.
Und wenn Sie das nächste Mal einen umbrechenden Footer sehen: Prüfen Sie zuerst, ob irgendwo ein geschütztes Leerzeichen steht, das Sie längst vergessen haben.
