Vertikalen Abstand in HTML einfügen

Um vertikalen Abstand zwischen HTML-Elementen zu schaffen, verwenden Sie CSS margin oder padding. Wiederholte Leerzeilen im HTML-Quelltext erzeugen keine verlässlichen Abstände im Layout, da Browser gewöhnliche Leerzeichen zusammenfassen. Verwenden Sie <br>, wenn ein Zeilenumbruch zum Inhalt gehört, etwa bei einer Adresse. <hr> kennzeichnet einen thematischen Wechsel, und <pre> eignet sich für Text, dessen Leerzeichen und Zeilenumbrüche erhalten bleiben sollen.

Vertikalen Abstand mit dem HTML-Element <br> einfügen

Das Element <br> beginnt innerhalb desselben Textblocks eine neue Zeile. Es eignet sich für Inhalte, bei denen jede Zeile wichtig ist, etwa eine Postanschrift:

<p>HubSpot, Inc.<br>35 St. 2<br>California, USA</p>

Verwenden Sie separate Absätze oder CSS, wenn Sie eigenständige Blöcke mit Abstand im Layout benötigen. Wiederholte <br>-Elemente, mit denen Sie Inhalte nach unten verschieben, koppeln die Darstellung an das Markup und erschweren es, Abstände einheitlich anzupassen.

Vertikale Abstände mit CSS-Margins und Padding steuern

Mit CSS können Sie für Abstände im Layout einen einheitlichen Wert festlegen und ihn unabhängig vom Text anpassen. Ein Margin liegt außerhalb des Rahmens eines Elements; Padding liegt innerhalb des Rahmens zwischen diesem und dem Inhalt. Das vorhandene Diagramm zum CSS-Boxmodell veranschaulicht diese Ebenen.

Wenn Sie nach jedem Absatz einen Abstand wünschen, können Sie beispielsweise ein unteres Margin festlegen:

p { margin-bottom: 1rem; }

Die Eigenschaft margin-bottom erzeugt Platz außerhalb des Absatzrahmens. Ein Wert wie 1rem richtet sich nach der Schriftgröße des Wurzelelements. Passen Sie ihn anschließend an das umgebende Design an. Benachbarte vertikale Margins können kollabieren. Der sichtbare Abstand zwischen zwei Blöcken entspricht daher möglicherweise dem größeren Margin und nicht der Summe beider Werte.

Verwenden Sie padding-bottom, wenn der zusätzliche Platz innerhalb des Elements liegen soll, zum Beispiel wenn Hintergrund oder Rahmen diesen Bereich einschließen sollen:

p { padding-bottom: 1rem; }

Padding vergrößert die Box des Elements und kann dessen Gesamtgröße beeinflussen. Wenden Sie es auf das passende Element oder die passende Komponente an. Berücksichtigen Sie beim Vergleich der Abstandsmethoden auch den vorgesehenen Hintergrund und Rahmen.

Eine vollständige Seite kann Markup und Formatierung zusammen enthalten. Dieses JavaScript-Beispiel gibt den Quelltext einer kleinen HTML-Seite mit einheitlichen Absatzabständen aus:

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    p { margin-bottom: 1rem; }
  </style>
</head>
<body>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</body>
</html>`;
console.log(page);

Das Skript gibt HTML-Quelltext aus. Ein Browser wendet das CSS an, wenn dieser Quelltext als Seite geöffnet wird. Die Textausgabe selbst zeigt die gerenderten Abstände nicht.

Abstandsregeln mit einer CSS-Klasse wiederverwenden

Wenn nur bestimmte Elemente denselben Abstand benötigen, können Sie eine wiederverwendbare Klasse definieren, statt alle Absätze zu ändern:

.spacer { margin-bottom: 1rem; }

Wenden Sie die Klasse dort an, wo der Abstand gewünscht ist, zum Beispiel: <p class="spacer">First paragraph.</p><p>Second paragraph.</p>. Die Klasse .spacer bündelt den Wert in einer Regel, sodass Sie die ausgewählten Abstände gemeinsam anpassen können. Gehört die Regel zu einer bestimmten Komponente, wählen Sie einen Namen, der deren Funktion beschreibt.

<hr> und <pre> für ihren vorgesehenen Zweck verwenden

Das Element <hr> kennzeichnet einen thematischen Wechsel zwischen Teilen einer Seite. Browser stellen es üblicherweise als waagerechte Linie dar; den standardmäßigen Abstand können Sie mit CSS gestalten. Es ist kein leerer Abstandshalter. Verwenden Sie es, wenn ein Wechsel des Themas oder der Szene inhaltlich bedeutsam ist.

Das Element <pre> stellt vorformatierten Text dar und erhält die darin enthaltenen Leerzeichen und Zeilenumbrüche. Es eignet sich für Code und andere Texte, bei denen diese Formatierung wichtig ist. Allgemeine Leerzeilen im umgebenden HTML werden dadurch nicht zu einer Layoutmethode. Für Abstand um einen <pre>-Block legen Sie CSS-Margins oder Padding am Element fest.