Das Erstellen von Leerzeichen und die physische Trennung von Elementen in HTML kann für den angehenden Webdesigner schwierig sein. Das ist weil HTML hat eine Eigenschaft, die als "Whitespace Collapse" bekannt ist. Unabhängig davon, ob Sie 1 Leerzeichen oder 100 in Ihren HTML-Code eingeben, reduziert der Webbrowser diese Leerzeichen automatisch auf ein einziges Leerzeichen. Das ist anders als bei einem Programm wie Microsoft Word, die es Dokumenterstellern ermöglicht, mehrere Leerzeichen zu trennen, um Wörter und andere Elemente dieses Dokuments zu trennen. So funktioniert der Abstand beim Website-Design nicht.
Also, wie fügen Sie Leerzeichen in HTML hinzu, die auf der Webseite, die Sie erstellt haben? Dieser Artikel untersucht einige der verschiedenen Möglichkeiten.
Leerzeichen in HTML mit CSS
Die bevorzugte Methode zum Hinzufügen von Leerzeichen in Ihrem HTML ist mit Cascading Stylesheets (CSS). CSS sollte verwendet werden, um visuelle Aspekte einer Webseite hinzuzufügen, und da die Abstände Teil der visuellen Designmerkmale einer Seite sind, ist CSS der Ort, an dem Sie dies tun möchten.
In CSS können Sie entweder die Eigenschaften margin oder padding verwenden, um Platz um Elemente herum hinzuzufügen. Darüber hinaus fügt die text-indent-Eigenschaft Platz vor dem Text hinzu, z. B. zum Einrücken von Absätzen.
Hier ist ein Beispiel für die Verwendung von CSS, um Platz vor allen Absätzen hinzuzufügen. Fügen Sie das folgende CSS zu Ihrem. hinzu extern oder intern Stylesheet:
p {
Texteinzug: 3em;
}
Leerzeichen in HTML in Ihrem Text
Wenn Sie Ihrem Text nur ein oder zwei zusätzliche Leerzeichen hinzufügen möchten, können Sie das geschützte Leerzeichen verwenden. Dieses Zeichen verhält sich wie ein Standard-Leerzeichen, nur dass es im Browser nicht zusammenfällt.
Hier ist ein Beispiel für das Hinzufügen von fünf Leerzeichen in einer Textzeile:
Dieser Text hat fünf zusätzliche Leerzeichen darin
Verwendet den HTML-Code:
Dieser Text hat fünf zusätzliche Leerzeichen darin
Sie können auch die
-Tag, um zusätzliche Zeilenumbrüche hinzuzufügen.
Dieser Satz hat am Ende fünf Zeilenumbrüche
Warum Leerzeichen in HTML eine schlechte Idee sind
Obwohl diese Optionen beide funktionieren – das geschützte Leerzeichen fügt Ihrem Text und der Zeile tatsächlich Abstand hinzu Pausen fügen den Abstand unter dem oben gezeigten Absatz hinzu – dies ist nicht der beste Weg, um Abstände in Ihrem Website. Das Hinzufügen dieser Elemente zu Ihrem HTML fügt dem Code visuelle Informationen hinzu, anstatt die Struktur einer Seite (HTML) von den visuellen Stilen (CSS) zu trennen. Best Practices schreiben vor, dass diese aus einer Reihe von Gründen getrennt sein sollten, einschließlich der einfachen Aktualisierung in der Zukunft und der Gesamtdateigröße und Seitenleistung.
Wenn Sie ein externes Stylesheet verwenden, um alle Ihre Stile und Abstände zu diktieren, ist es einfach, diese Stile für die gesamte Site zu ändern, da Sie nur dieses eine Stylesheet aktualisieren müssen.
Betrachten Sie das obige Beispiel des Satzes mit fünf
Tags am Ende davon. Wenn Sie diesen Abstand am Ende jedes Absatzes wünschen, müssten Sie diesen HTML-Code zu jedem Absatz Ihrer gesamten Site hinzufügen. Das ist eine beträchtliche Menge an zusätzlichem Markup, die Ihre Seiten aufbläht. Wenn Sie später feststellen, dass dieser Abstand zu groß oder zu klein ist, und Sie ihn ein wenig ändern möchten, müssen Sie außerdem jeden einzelnen Absatz auf Ihrer gesamten Website bearbeiten. Nein danke!
Anstatt diese Abstandselemente zu Ihrem Code hinzuzufügen, verwenden Sie CSS.
p {
Polsterung-unten: 20px;
}
Diese eine CSS-Zeile würde den Abstand unter den Absätzen Ihrer Seite hinzufügen. Wenn Sie diesen Abstand in Zukunft ändern möchten, bearbeiten Sie diese eine Zeile (anstelle des gesamten Codes Ihrer Website) und Sie können loslegen!
Wenn Sie nun einen einzelnen Bereich in einem Teil Ihrer Website hinzufügen müssen, verwenden Sie a
Tag oder ein einzelnes geschütztes Leerzeichen ist nicht das Ende der Welt, aber Sie müssen vorsichtig sein. Die Verwendung dieser Inline-HTML-Abstandsoptionen kann ein rutschiger Abstieg sein. Während ein oder zwei Ihrer Site nicht schaden können, werden Sie Probleme auf Ihren Seiten verursachen, wenn Sie diesen Weg fortsetzen. Am Ende ist es besser, sich für HTML-Abstände und alle anderen visuellen Anforderungen von Webseiten an CSS zu wenden.