Leerzeichen in HTML einfügen
Tipp in HTML fünf Leerzeichen zwischen zwei Wörter, und der Browser zeigt eines an. Jede Folge aus Leerzeichen, Tabs und Zeilenumbrüchen wird zu einem einzigen Leerzeichen zusammengefasst. Für zusätzliche Leerzeichen nimmst du die Entity für das geschützte Leerzeichen , einmal pro Leerzeichen:
funktioniert für ein paar Leerzeichen in einer Textzeile. Für größere Lücken oder Abstände zwischen Elementen nimmst du CSS, wie weiter unten gezeigt.
Was macht
ist das geschützte Leerzeichen (Zeichen U+00A0). Es hat zwei Wirkungen:
- Es wird nie zusammengefasst, drei davon ergeben also drei Leerzeichen.
- An ihm bricht die Zeile nie um, die Wörter auf beiden Seiten bleiben also zusammen.
Die zweite Wirkung ist seine eigentliche Aufgabe. Zahlen und ihre Einheiten, Initialen und kurze Wendungen, die getrennt auf zwei Zeilen falsch aussehen, verbindest du mit :
Im grauen Kasten landen „10“ und „km“ in verschiedenen Zeilen. Im grünen lassen sie sich nicht trennen. Um eine längere Passage zusammenzuhalten, ist white-space: nowrap an einem span einfacher, als Entities aneinanderzureihen; siehe die Seite zum Zeilenumbruch.
Leerzeichen-Entities in verschiedenen Breiten
HTML hat benannte Zeichen für breitere und schmalere Leerzeichen. Auch sie werden nicht zusammengefasst und eignen sich deshalb für feine Abstände im Text:
| Entity | Name | Breite |
|---|---|---|
| Geschütztes Leerzeichen | Wie ein normales Leerzeichen |
  | Halbgeviert (En space) | Ein halbes em |
  | Geviert (Em space) | Ein em (die Schriftgröße) |
  | Schmales Leerzeichen (Thin space) | Ein Bruchteil eines em, abhängig von der Schrift |
  | Schmales geschütztes Leerzeichen | Schmal und ohne Zeilenumbruch |
Die blaue Markierung zeigt die Breite jedes Leerzeichens. Nur und   verhindern außerdem Zeilenumbrüche.
Jedes Leerzeichen erhalten: pre und white-space
Wenn die Abstände Teil des Inhalts sind (Code, ASCII-Art, ausgerichtete Spalten, Gedichte), erhältst du lieber den ganzen Leerraum, statt Entities einzufügen. Das <pre>-Element macht das standardmäßig, und die CSS-Eigenschaft white-space macht es für jedes Element:
Wert von white-space | Leerzeichen | Zeilenumbrüche | Umbruch langer Zeilen |
|---|---|---|---|
normal (Standard) | Zusammengefasst | Werden zu Leerzeichen | Ja |
nowrap | Zusammengefasst | Werden zu Leerzeichen | Nein |
pre | Erhalten | Erhalten | Nein |
pre-wrap | Erhalten | Erhalten | Ja |
pre-line | Zusammengefasst | Erhalten | Ja |
Für Nutzertext willst du meistens pre-wrap: Es erhält die Abstände und bricht auf schmalen Bildschirmen trotzdem um. pre lässt die Zeilen, wie sie sind, und scrollt oder läuft stattdessen über.
Auch Tabs bleiben in pre erhalten. Ihre Breite beträgt standardmäßig 8 Leerzeichen, und die Eigenschaft tab-size ändert sie (tab-size: 4).
Abstände mit CSS
Wenn du denkst „hier brauche ich ein Leerzeichen“, geht es meistens um Layout, und das erledigt CSS besser als Entities, weil der Abstand einheitlich bleibt und sich an einer Stelle ändern lässt:
margin und padding schaffen Abstand zwischen Elementen, gap zwischen Einträgen in einem Flex- oder Grid-Container, letter-spacing und word-spacing im Text selbst. Um die erste Zeile eines Absatzes einzurücken, nimm text-indent; mehr dazu auf der Seite Text zentrieren.
Die Lücke zwischen Inline-Elementen
Die Kehrseite des Zusammenfassens: Leerraum zwischen zwei Inline- oder Inline-Block-Elementen zählt immer noch als ein Leerzeichen. Ein Zeilenumbruch zwischen zwei Buttons im Quelltext erzeugt eine kleine Lücke zwischen ihnen:
Das erste Paar hat eine Lücke durch den Zeilenumbruch im Quelltext. In einem Flex-Container wird Leerraum zwischen den Einträgen ignoriert, deshalb berührt sich das zweite Paar. Nimm Flex und gap, wenn du den Abstand genau steuern willst.
Häufige Fehler
- Ketten aus
fürs Layout. Sie gehen kaputt, sobald sich Schrift oder Bildschirmgröße ändern. Nimmmargin,paddingodergap. - Zusätzliche Leerzeichen tippen und erwarten, dass sie erscheinen. Sie werden zusammengefasst. Nimm
oderwhite-space: pre-wrap.  ohne Semikolon schreiben. Browser akzeptieren es meistens, aber es ist ungültig und scheitert an manchen Stellen. Schließ immer mit;ab.- Überall
verwenden, um Umbrüche zu verhindern. Eine lange Folge von nicht umbrechendem Text läuft auf Handys über. Verbinde nur, was zusammenbleiben muss. - Absätze mit Leerzeichen einrücken. Nimm
text-indentim CSS.
Häufig gestellte Fragen
Wie füge ich in HTML ein Leerzeichen ein?
Ein einzelnes Leerzeichen funktioniert, wie du es tippst, aber zusätzliche Leerzeichen werden zu einem zusammengefasst. Für mehr nimmst du die Entity für das geschützte Leerzeichen , eine pro Leerzeichen: a b. Für Abstände im Layout nimmst du stattdessen CSS margin, padding oder gap.
Was bedeutet in HTML?
ist ein geschütztes Leerzeichen (non-breaking space). Es sieht aus wie ein normales Leerzeichen, aber der Browser bricht an ihm nie die Zeile um und fasst es nie zusammen. So hältst du Angaben wie 10 km zusammen und kannst zusätzliche Leerzeichen einfügen.
Warum ignoriert HTML meine Leerzeichen?
HTML fasst Leerraum zusammen: Jede Folge aus Leerzeichen, Tabs und Zeilenumbrüchen wird als ein einziges Leerzeichen angezeigt, und Leerraum am Anfang und Ende einer Zeile wird entfernt. Mit , <pre> oder der CSS-Eigenschaft white-space bleibt er erhalten.
Wie füge ich in HTML einen Tab ein?
Außerhalb von vorformatiertem Text hat HTML keinen sichtbaren Tab. In <pre> oder einem Element mit white-space: pre bleibt ein Tabzeichen erhalten, und die CSS-Eigenschaft tab-size legt seine Breite fest. Um einen Absatz einzurücken, nimm im CSS text-indent oder padding-inline-start.
Was ist der Unterschied zwischen und  ?
ist so breit wie ein normales Leerzeichen.   ist ein halbes em breit und   ein ganzes em (die Breite der Schriftgröße).   und   werden nicht zusammengefasst, aber anders als bei darf die Zeile an ihnen trotzdem umbrechen.
