Das Erstellen von zusätzlichem Speicherplatz in Ihrem HTML auf einer Webseite kann auf viele Arten erreicht werden, abhängig von der Art des Speicherplatzes, den Sie erstellen möchten. Die folgenden Abschnitte enthalten viele der verschiedenen Möglichkeiten, zusätzlichen Speicherplatz mit HTML und CSS zu erstellen.,
Erstellen zusätzlicher Leerzeichen vor oder nach Text
Eines der verwirrendsten Dinge für neue Benutzer, die eine Webseite erstellen, ist, dass sie die Leertaste nicht mehrmals drücken können, um zusätzliche Leerzeichen zu erstellen. Um zusätzliche Leerzeichen vor, nach oder zwischen Ihrem Text zu erstellen, verwenden Sie das erweiterte HTML-Zeichen (non-breaking space).
Zum Beispiel haben wir mit“ extra space “ den folgenden Code in unserem HTML.,
extra space
Wenn Sie einen WYSIWYG-Editor verwenden, um den obigen Code einzugeben, müssen Sie sich auf der Registerkarte HTML befinden oder den HTML-Code bearbeiten.
Eine Liste erweiterter HTML-Sonderzeichen finden Sie unter: Vollständige Liste erweiterter HTML-Sonderzeichen.
Abstand im Text beibehalten, der in eine Seite eingefügt wird
Wenn Sie Text mit zusätzlichen Leerzeichen oder Registerkarten einfügen, können Sie das HTML-Tag <<> verwenden, um den Text formatiert zu halten., Nachfolgend finden Sie ein Beispiel zum Einfügen von Text mit zusätzlichen Leerzeichen mit dem Tag <pre>.
This text has lots of spaces
Das obige Beispiel wird mit dem folgenden HTML-Code ausgeführt.
<pre class="tab">This text has lots of spaces</pre>
- Sehen Sie unsere HTML – <pre> – Tags Seite für weitere Informationen zu diesem tag.
Wenn Sie einen WYSIWYG-Editor verwenden, um den obigen Code einzugeben, müssen Sie sich auf der Registerkarte HTML befinden oder den HTML-Code bearbeiten.,
Erstellen Sie zusätzlichen Platz um ein Element oder Objekt
Jedes HTML-Element kann zusätzliche Abstände oben, rechts, unten oder links hinzugefügt haben. Stellen Sie jedoch sicher, dass Sie den Unterschied zwischen Rand und Auffüllung verstehen, bevor Sie die Art des Speicherplatzes festlegen, den Sie um das Element oder Objekt hinzufügen möchten. Wie in der Abbildung unten zu sehen, umgibt das Auffüllen das Element innerhalb des Rahmens und den Rand außerhalb des Rahmens.
Das folgende Beispiel zeigt unseren Absatz umgeben von einem Rand, eingerückt mit einem Rand und mit Abstand rechts und unten.,
Ein Beispiel für einen Absatz mit Rand und Auffüllung.
Das obige Beispiel wurde mit dem folgenden Code erstellt.
Im ersten Abschnitt des Codes fügt „margin-left: 2.5 em;“ einen linken Rand von 2.5 em hinzu, wodurch eingerückter Text angezeigt wird. Wie im Beispiel gezeigt, liegt dieser Abstand außerhalb des Rahmens. Im nächsten Abschnitt definiert“ padding: 0 7em 2em 0; “ die obere, rechte, untere und linke (im Uhrzeigersinn) Polsterung. Es gibt“ 0 „obere Polsterung,“ 7em „rechte Polsterung,“ 2em “ untere Polsterung und 0 linke Polsterung., Der Rest dieses Beispiels definiert, wie der Rand aussehen soll.
Erstellen einer Registerkarte mit CSS und HTML
Eine Registerkarte kann in HTML erstellt werden, indem der linke Rand eines Elements angepasst wird. Dieser Absatz hat beispielsweise einen linken Rand von 2,5 em von dem Element, das den Text enthält. Das CSS zum Erstellen dieses linken Randes wird unten gezeigt.
.tab { margin-left: 2.5em}
Nachdem wir diesen Code in unsere CSS-Datei eingefügt haben, können wir die Klasse“ tab “ auf jeden Text anwenden, um das Erscheinungsbild einer Registerkarte zu erstellen. Der Wert des linken Randes kann je nach Bedarf erhöht oder verringert werden.,
Obwohl wir die obige Methode empfehlen, kann das CSS am linken Rand auch inline hinzugefügt werden, wie im folgenden Beispiel gezeigt.
<p style="margin-left:2.5em">An example of a 5em left margin.</p>
ein Beispiel für eine 5em linken Rand.
- Wie drücke ich Text auf meiner Webseite oder in HTML ein?
Fügen Sie Platz unter einer Zeile oder einem Absatz Text hinzu
Wenn Sie zusätzlichen Platz unter einer Zeile oder einem Absatz Text hinzufügen müssen und dies nur einmal tun müssen, können Sie das <br> tag. Unten ist ein Beispiel, wie diese Technik angewendet werden kann.,
<p>This sentence contains example text.<br><br>As you can see, two breaks add the space above.</p>
Der obige Code erstellt den unten gezeigten Text.
Dieser Satz enthält Beispieltext.
Wie Sie sehen können, fügen zwei Pausen den Raum oben.
Bei Bedarf können zusätzliche Pausen hinzugefügt werden. Wir empfehlen jedoch, die zuvor erwähnte CSS-Methode zu verwenden, um Polsterung und Abstand um Ihren Text hinzuzufügen, wenn sie an mehreren Stellen auf einer Seite ausgeführt werden.
Zusätzliche Informationen
- So richten Sie Text auf einer Webseite in HTML oder CSS aus.
- So erstellen Sie unformatierten HTML-Text.
- Siehe unsere White Space Definition für weitere Informationen und verwandte Links.,
- HTML und Webdesign Hilfe und Unterstützung.