Die Art und Weise, wie Browser mit Leerräumen umgehen, ist zunächst nicht sehr intuitiv, insbesondere wenn Sie vergleichen, wie Hypertext Markup Language mit Leerräumen im Vergleich zu Textverarbeitungsprogrammen umgeht. In Textverarbeitungsprogrammen können Sie dem Dokument viele Abstände oder Tabulatoren hinzufügen, und diese Abstände werden in der Anzeige des Dokumentinhalts widergespiegelt. Dieses WYSIWYG-Design ist bei HTML oder bei Webseiten nicht der Fall.
Abstand im Druck
In Textverarbeitungsprogrammen sind die drei primären Leerzeichen die Platz, Tab, und Wagenrücklauf. Jedes dieser Zeichen verhält sich auf unterschiedliche Weise, aber in HTML rendern Browser sie alle im Wesentlichen gleich. Ob Sie ein Feld oder 100 Felder in Ihrem HTML-Markup oder vermischen Sie Ihre Abstände mit Tabulatoren und Wagenrückläufen, all dies wird auf ein Leerzeichen komprimiert, wenn die Seite von der gerendert wird Browser. In der Webdesign-Terminologie ist dies bekannt als Leerraum kollabieren
. Sie können diese typischen Abstandstasten nicht verwenden, um einer Webseite Leerzeichen hinzuzufügen, da der Browser beim Rendern im Browser wiederholte Leerzeichen auf nur ein Leerzeichen reduziert.Verwenden von CSS zum Erstellen von HTML-Tabs und -Abständen
Websites werden heute mit einer Trennung von Struktur und Stil erstellt. Die Struktur einer Seite wird von HTML gehandhabt, während der Stil von Cascading Style Sheets vorgegeben wird. Um Abstände zu erstellen oder ein bestimmtes Layout zu erreichen, verwenden Sie CSS, anstatt dem HTML-Code Leerzeichen hinzuzufügen.
Wenn Sie versuchen,. zu verwenden Registerkarten um Textspalten zu erstellen, verwenden Sie stattdessen
Wenn es sich bei den Daten, die Sie anordnen, um Tabellendaten handelt, verwenden Sie Tabellen, um diese Daten nach Ihren Wünschen auszurichten. Tabellen haben im Webdesign oft einen schlechten Ruf, weil sie so viele Jahre als reine Layout-Tools missbraucht wurden, aber Tabellen sind immer noch absolut gültig, wenn Ihr Inhalt wirklich tabellarische Daten enthält.
Ränder, Auffüllung und Texteinzug
Die gebräuchlichste Methode zum Erstellen von Abständen mit CSS ist die Verwendung eines der folgenden CSS-Stile:
- Spanne
- Polsterung
- Texteinzug
Ziehen Sie beispielsweise die erste Zeile eines Absatzes wie einen Tabulator mit dem folgenden CSS ein (beachten Sie, dass dies davon ausgeht, dass Ihr Absatz das Klassenattribut "first" hat):
p.zuerst {
Texteinzug: 5em;
}
Dieser Absatz rückt etwa fünf Zeichen ein.
Verwenden Sie die Rand- oder Auffüllungseigenschaften in CSS um den Abstand oben, unten, links oder rechts (oder Kombinationen dieser Seiten) eines Elements hinzuzufügen. Erzielen Sie alle erforderlichen Abstände, indem Sie sich an CSS wenden.
Verschieben von Text um mehr als ein Leerzeichen ohne CSS
Wenn Sie nur möchten, dass Ihr Text um mehr als ein Leerzeichen vom vorhergehenden Element entfernt wird, verwenden Sie das geschützte Leerzeichen.
Um das geschützte Leerzeichen zu verwenden, fügen Sie hinzu so oft, wie Sie es in Ihrem HTML-Markup benötigen.
HTML respektiert diese geschützten Leerzeichen und reduziert sie nicht auf ein einzelnes Leerzeichen. Dieser Ansatz gilt jedoch als schlechte Praxis, da er einem Dokument zusätzliches HTML-Markup hinzufügt, nur um Layoutanforderungen zu erfüllen. Wenn möglich, vermeiden Sie das Hinzufügen von geschützten Leerzeichen, nur um den gewünschten Layouteffekt und die gewünschte Verwendung zu erzielen CSS-Ränder und -Auffüllungen stattdessen.