HTML <spacer>-Tag
Das HTML <spacer>-Tag ist ein veraltetes Netscape-Element, das kein moderner Browser unterstützt. Verwenden Sie stattdessen CSS margin, padding oder gap.
Das HTML <spacer>-Tag ist ein veraltetes Element, das kein moderner Browser unterstützt. Verwenden Sie es nicht. Wenn Sie leeren Abstand zwischen Elementen auf einer Webseite hinzufügen möchten, greifen Sie stattdessen auf CSS zurück — die Eigenschaften margin, padding und gap bieten Ihnen vollständige, zuverlässige Kontrolle in jedem Browser.
Diese Seite erklärt, was <spacer> war, warum es verschwunden ist und — am wichtigsten — die modernen CSS-Techniken, die Sie an seiner Stelle verwenden sollten.
Ein kurzer historischer Überblick
Mitte der 1990er Jahre, bevor CSS weit verbreitet war, hatten Web-Autoren keine standardisierte Möglichkeit, Abstände zu steuern. Ein verbreiteter Trick war das Einfügen eines transparenten 1×1-Pixel-Bilds (das "Spacer-GIF") und das Strecken mit den Attributen width und height, um Inhalte zu verschieben.
Um dies weniger umständlich zu machen, führte Netscape das proprietäre <spacer>-Element in Netscape Navigator Mitte der 1990er Jahre ein. Es ermöglichte das Hinzufügen von horizontalem, vertikalem oder blockförmigem leerem Raum, ohne ein Bild zu laden. Jedoch:
- Es war eine Netscape-spezifische Erweiterung — Internet Explorer und andere Browser haben es nie implementiert.
- Es wurde nie in die HTML-Spezifikation aufgenommen.
- Sobald CSS ausgereift war, wurde es völlig überflüssig.
Infolgedessen wurde <spacer> aufgegeben. Heute ist es unter den veralteten und als veraltet markierten HTML-Tags aufgeführt und wird von allen Browsern ignoriert.
Die alte (nicht funktionale) Syntax
Nur zur historischen Referenz zeigt dies, wie <spacer> geschrieben wurde. Das Tag war leer, hatte also kein schließendes Tag. Dieser Code funktioniert in keinem aktuellen Browser — er wird nur gezeigt, um die veraltete Syntax zu veranschaulichen.
<!-- OBSOLETE — does not work in any modern browser. Do not use. -->
<p>
Some text
<spacer type="horizontal" size="100">
more text after a horizontal gap.
</p>
<spacer type="block" width="100" height="50">Der moderne Weg: CSS verwenden
CSS ersetzt jeden Anwendungsfall, den das <spacer>-Tag abzudecken versuchte, und funktioniert überall.
Horizontaler und vertikaler Abstand mit margin / padding
Verwenden Sie margin, um Abstand außerhalb eines Elements hinzuzufügen, und padding, um Abstand innerhalb davon hinzuzufügen. Das folgende Beispiel fügt horizontalen Abstand zwischen zwei Wörtern und vertikalen Abstand unterhalb eines Absatzes hinzu:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gap-right {
/* horizontal space after the word */
margin-right: 100px;
}
.spaced {
/* vertical space below the paragraph */
margin-bottom: 40px;
}
.padded {
/* internal space on all sides */
padding: 20px;
background-color: #d4f0f0;
}
</style>
</head>
<body>
<p>
<span class="gap-right">Start</span>End
</p>
<p class="spaced">This paragraph has 40px of space below it.</p>
<p class="padded">This paragraph has 20px of padding inside it.</p>
</body>
</html>Gleichmäßiger Abstand zwischen Elementen mit gap
Wenn Sie Elemente mit Flexbox oder CSS Grid anordnen, fügt die gap-Eigenschaft konsistenten Abstand zwischen ihnen hinzu, ohne die eigenen Abstände der Elemente zu beeinflussen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.row {
display: flex;
gap: 24px; /* space between every item */
}
.row > div {
padding: 10px 16px;
background-color: #d4f0f0;
}
</style>
</head>
<body>
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>Weitere Möglichkeiten, Abstand hinzuzufügen
Je nach Bedarf helfen auch diese Standard-HTML- und CSS-Optionen dabei, Leeraum zu steuern:
- Das
<p>-Tag erzeugt einen Absatzumbruch mit standardmäßigem Abstand oben und unten. - Das
<br>-Tag fügt einen einzelnen Zeilenumbruch ein. - Das
<pre>-Tag bewahrt vorformatierten Text, sodass Leerzeilen und Leerzeichen genau so erscheinen, wie sie im HTML geschrieben wurden. - Das Zeichenentity
erzeugt ein geschütztes Leerzeichen. - Das Zeichen
	ist ein Tabulator. Es benötigt normalerweise umgebenden Text oder CSS wiewhite-space: pre, um sichtbar gerendert zu werden.
Veraltete Attribute (zur Referenz)
Diese Attribute gehörten zum veralteten <spacer>-Tag. Sie sind nur aufgeführt, damit Sie sie in altem Markup erkennen können — keines von ihnen funktioniert heute.
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left, right, center | Ausrichtung eines block-Typen Spacers. |
| size | Anzahl der Pixel | Größe des leeren Raums für horizontal- oder vertical-Spacer. |
| width | Anzahl der Pixel | Breite des leeren Raums für einen block-Typen Spacer. |
| height | Anzahl der Pixel | Höhe des leeren Raums für einen block-Typen Spacer. |
| type | horizontal, vertical, block | Richtung/Form des Spacers. |