Das Erstellen von Leerzeichen und die physische Trennung von Elementen in HTML kann für den beginnenden Webdesigner schwer verständlich sein. Dies liegt daran, dass HTML eine Eigenschaft hat, die als "Whitespace-Minimierung" bezeichnet wird. Unabhängig davon, ob Sie 1 Leerzeichen oder 100 in Ihren HTML-Code eingeben, reduziert der Webbrowser diese Leerzeichen automatisch auf ein einziges Leerzeichen. Dies unterscheidet sich von einem Programm wie Microsoft Word, mit dem Dokumentersteller mehrere Leerzeichen hinzufügen können, um Wörter und andere Elemente dieses Dokuments voneinander zu trennen. So funktioniert das Design von Websites nicht.
Wie fügen Sie in HTML Whitespaces hinzu, die auf der Webseite angezeigt werden? Dieser Artikel untersucht einige der verschiedenen Möglichkeiten.
Leerzeichen in HTML mit CSS
Leerzeichen werden in HTML vorzugsweise mit Cascading Style Sheets (CSS) hinzugefügt. CSS sollte verwendet werden, um visuelle Aspekte einer Webseite hinzuzufügen. Da der Abstand zu den visuellen Designmerkmalen einer Seite gehört, sollten Sie dies in CSS tun.
In CSS können Sie entweder die Rand- oder die Auffüllungseigenschaft verwenden, um um Elemente Platz zu schaffen. Darüber hinaus fügt die Eigenschaft text-indent der Textvorderseite Platz hinzu, beispielsweise zum Einrücken von Absätzen.
Hier ein Beispiel, wie Sie mit CSS Leerzeichen vor allen Absätzen einfügen. Fügen Sie Ihrem externen oder internen Stylesheet das folgende CSS hinzu:
p {Text Gedankenstrich: 3em;} 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 im Browser bricht es nicht zusammen. Hier ein Beispiel, wie Sie fünf Leerzeichen in eine Textzeile einfügen: Dieser Text enthält fünf zusätzliche Leerzeichen Verwendet das HTML: Dieser Text enthält fünf zusätzliche Leerzeichen Sie können auch die Dieser Satz enthält am Ende fünf Zeilenumbrüche Diese Optionen funktionieren zwar beide - das geschützte Leerzeichen-Element fügt Ihrem Text tatsächlich Abstand hinzu und die Zeilenumbrüche fügen Abstand unterhalb des oben gezeigten Absatzes ein. Durch das Hinzufügen dieser Elemente zu Ihrem HTML-Code werden dem Code visuelle Informationen hinzugefügt, 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, z. B. die spätere Aktualisierung, die Dateigröße und die Seitenleistung insgesamt. Wenn Sie ein externes Stylesheet verwenden, um alle Stile und Abstände festzulegen, können Sie diese Stile für die gesamte Website ändern, da Sie nur dieses eine Stylesheet aktualisieren müssen. Betrachten Sie das obige Beispiel des Satzes mit fünf Anstatt diese Abstandselemente zu Ihrem Code hinzuzufügen, verwenden Sie CSS. p {Polsterung unten: 20px;} Diese eine Zeile von CSS würde den Absätzen Ihrer Seite Abstände hinzufügen. Wenn Sie diesen Abstand in der Zukunft ändern möchten, bearbeiten Sie diese Zeile (anstelle des gesamten Site-Codes) und Sie können loslegen! Wenn Sie nun ein einzelnes Feld in einem Teil Ihrer Website hinzufügen möchten, verwenden Sie ein Leerzeichen in HTML: In Ihrem Text
tag, um zusätzliche Zeilenumbrüche hinzuzufügen.
Warum der Abstand in HTML eine schlechte Idee ist
Tags am Ende davon. Wenn Sie diese Abstände am Ende jedes Absatzes wünschen, müssen Sie diesen HTML-Code zu jedem Absatz Ihrer gesamten Website hinzufügen. Das ist eine Menge zusätzlicher Markups, die Ihre Seiten aufblähen werden. Wenn Sie auf der Straße entscheiden, 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 Ihrer gesamten Website bearbeiten. Nein danke!
Ein Tag oder ein einzelner, nicht verletzender Raum ist nicht das Ende der Welt, aber Sie müssen vorsichtig sein. Die Verwendung dieser Inline-HTML-Abstandsoptionen kann eine glatte Steigung sein. Wenn eine oder zwei Ihrer Website möglicherweise nicht schaden, werden Sie, wenn Sie diesen Pfad fortsetzen, Probleme in Ihre Seiten einführen. Am Ende ist es besser, CSS für HTML-Abstände und alle anderen visuellen Anforderungen von Webseiten zu verwenden.
