HTML ändern · Anleitung

HTML: Zeilenumbruch und Abstände richtig setzen

Warum die Enter-Taste nichts bewirkt

Das ist der Punkt, an dem fast alle stolpern — und der eigentliche Grund, warum du hier bist. Du drückst im Code auf Enter, speicherst, lädst neu: und der Text steht weiter in einer Zeile.

Der Grund: HTML fasst mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche zu einem einzigen Leerzeichen zusammen. Das nennt man Whitespace-Zusammenfassung. Dieser Code …

<p>Erste Zeile
Zweite Zeile</p>

… erscheint im Browser als: „Erste Zeile Zweite Zeile". Ein Leerzeichen, kein Umbruch.

Das ist kein Fehler, sondern Absicht: So kannst du Code im Editor übersichtlich einrücken und umbrechen, ohne dass es die Darstellung verändert. Umbrüche musst du dem Browser deshalb ausdrücklich sagen.

Die eine Zeile: <br>

<p>Erste Zeile<br>
Zweite Zeile</p>

<br> bedeutet „break", also Umbruch. Es wird nicht geschlossen — es gibt kein </br>. In älteren Anleitungen steht manchmal <br /> mit Schrägstrich; das stammt aus XHTML, funktioniert weiterhin, ist aber nicht mehr nötig.

<br> oder <p>? Die wichtigste Entscheidung

<!-- richtig: Adresse, Zeilen gehören zusammen -->
<p>
  Musterstraße 1<br>
  12345 Musterstadt
</p>

<!-- richtig: zwei Gedanken, zwei Absätze -->
<p>Der erste Gedanke.</p>
<p>Der zweite Gedanke.</p>

Der häufigste Fehler: Absätze mit <br><br> zu trennen, statt <p> zu benutzen. Das sieht im Browser fast gleich aus, hat aber drei Nachteile: Der Abstand lässt sich später nicht zentral ändern, Screenreader erkennen die Absatzstruktur nicht, und Suchmaschinen können den Text schlechter einordnen. Zwei <br> hintereinander sind fast immer ein Zeichen, dass dort ein <p> hingehört.

Abstände: nicht mit Umbrüchen, sondern mit CSS

Wenn dir der Abstand zwischen Absätzen zu klein oder zu groß ist, ist die Lösung nicht ein weiteres <br>, sondern eine Zeile CSS:

p {
  margin-bottom: 1.5rem;   /* Abstand UNTER dem Absatz */
  line-height: 1.7;        /* Abstand ZWISCHEN den Zeilen */
}

Drei Eigenschaften regeln alle Abstände auf einer Seite:

Zum Zeilenabstand ein Wert, der sich bewährt hat: 1.7 für Fließtext. Das ist eine Zahl ohne Einheit und bedeutet „das 1,7-fache der Schriftgröße" — sie wächst also mit, wenn die Schrift größer wird. Bei Überschriften darf es enger sein, etwa 1.2.

Warum Abstände manchmal doppelt erscheinen: Stoßen zwei Absätze aneinander, hat der obere einen Abstand nach unten und der untere einen nach oben. Browser fassen das zu einem Abstand zusammen — es gilt der größere der beiden Werte, nicht die Summe. Das heißt „Margin Collapsing" und ist der Grund, warum ein erhöhter Wert manchmal gar nichts sichtbar verändert.

Der Sonderfall: mehrere Leerzeichen erzwingen

Dieselbe Regel wie beim Umbruch gilt für Leerzeichen: Zehn hintereinander werden zu einem. Wenn du wirklich mehrere brauchst, nimmst du das geschützte Leerzeichen:

Preis:  49 €

  steht für „non-breaking space", ein Leerzeichen, das der Browser nicht zusammenfasst und an dem er auch nicht umbricht. Genau deshalb ist es nützlich zwischen Zahl und Einheit: „49 €" soll nie so umbrechen, dass die Zahl am Zeilenende und das Euro-Zeichen in der nächsten Zeile steht.

Nicht für Layout missbrauchen. Wer mit fünf   etwas einrückt, bekommt auf jedem Bildschirm ein anderes Ergebnis. Einrückungen und Abstände gehören in margin und padding. Alles weitere zum geschützten Leerzeichen und zu Sonderzeichen steht auf Sonderzeichen, Umlaute und Leerzeichen.

Wenn Umbrüche im Text erhalten bleiben sollen

Für Fälle, in denen der Text genau so erscheinen soll, wie er im Code steht — etwa ein Gedicht oder eine Adressliste — gibt es eine CSS-Eigenschaft, die die Zusammenfassung abschaltet:

.adresse {
  white-space: pre-line;   /* Umbrüche aus dem Code bleiben erhalten */
}

Damit brauchst du keine <br> mehr — die Enter-Taste wirkt dann tatsächlich. pre-line behält Umbrüche und fasst Leerzeichen weiterhin zusammen; pre-wrap behält beides.

Die vier Gründe, warum dein Umbruch nicht erscheint

1. Du hast Enter gedrückt statt <br> geschrieben. Der häufigste Fall, und der Grund für diese Seite.
2. Das Tag ist falsch geschrieben. <br> — nicht <break>, nicht <b r>.
3. Der Umbruch sitzt außerhalb des Absatzes. Ein <br> zwischen </p> und <p> bewirkt nichts Sinnvolles — es gehört in den Absatz.
4. Der Browser zeigt den alten Stand. Neu laden mit gedrückter Umschalttaste.

Dasselbe ohne Code: anklicken statt tippen

Wenn du deine Seite mit KI gebaut hast und nicht im Code arbeiten willst: PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten. Du ziehst deine HTML-Datei ins Tool und arbeitest auf der fertigen Seite.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen