So schaffen Sie zusätzlichen Platz in HTML oder einer Webseite

Das Erstellen zusätzlicher Leerzeichen in Ihrem HTML auf einer Webseite kann auf viele Arten erreicht werden, abhängig von der Art des Leerzeichens, das Sie erstellen möchten. Die folgenden Abschnitte enthalten verschiedene Möglichkeiten, zusätzlichen Platz zu schaffen, indem Sie sowohl HTML als auch CSS in einem HTML-Editor wie Dreamweaver oder einem Texteditor wie Notepad verwenden.

Zusätzliche Leerzeichen vor oder nach dem Text erstellen

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 die   (geschütztes Leerzeichen) erweitertes HTML-Zeichen.

Beispielsweise haben wir mit der Formulierung „zusätzliches Leerzeichen“ mit einem doppelten Leerzeichen den folgenden Code in unserem HTML.

extra    space

Behalten Sie den Abstand in Text bei, der auf einer Seite eingefügt wird

Wenn Sie Text mit zusätzlichen Leerzeichen oder Tabulatoren einfügen, können Sie das HTML-Tag

 verwenden, um den Text formatiert beizubehalten.  Nachfolgend finden Sie ein Beispiel dafür, wie Sie Text mit zusätzlichen Leerzeichen mithilfe des 
-Tags einfügen.

This    text   has    lots of     spaces
Das obige Beispiel wird mit dem folgenden HTML-Code erstellt.
<pre class="tab">This    text      has    lots of     spaces</pre>

Notiz

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 von zusätzlichem Raum um ein Element oder Objekt
Jedes HTML-Element kann oben, rechts, unten oder links mit zusätzlichen Abständen versehen werden.  Stellen Sie jedoch sicher, dass Sie den Unterschied zwischen Rand und Polsterung verstehen, bevor Sie entscheiden, welche Art von Abstand Sie um das Element oder Objekt hinzufügen möchten.  Wie in der Abbildung unten zu sehen ist, umgibt Polsterung das Element innerhalb des Rahmens und den Rand außerhalb des Rahmens.

Das folgende Beispiel zeigt unseren Absatz, der von einem Rahmen umgeben, mit einem Rand eingerückt und rechts und unten mit Abständen versehen ist.
Ein Beispiel für einen Absatz mit Rand und Auffüllung.
Das obige Beispiel wurde mit dem folgenden Code erstellt.
<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Example of a paragraph with margin and padding.</p>
Im ersten Abschnitt des Codes „margin-left: 2.5em;“  fügt einen linken Rand von 2,5 em hinzu, wodurch der Text eingerückt erscheint.  Wie das Beispiel zeigt, liegt dieser Abstand außerhalb der Umrandung.  Im nächsten Abschnitt „Padding: 0 7em 2em 0;“  definiert die obere, rechte, untere und linke (im Uhrzeigersinn) Polsterung.  Es gibt eine obere Auffüllung von "0", eine rechte Auffüllung von "7em", eine untere Auffüllung von "2em" und eine linke Auffüllung von 0.  Der Rest dieses Beispiels definiert, wie der Rahmen aussehen soll.
Erstellen einer Registerkarte mit CSS und HTML
Ein Tab kann in HTML erstellt werden, indem der linke Rand eines Elements angepasst wird.  Dieser Absatz hat beispielsweise einen linken Rand von 2,5 cm von dem Element, das den Text enthält.  Das CSS zum Erstellen dieses linken Rands ist unten dargestellt.
.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 eines Tabs zu erzeugen.  Der Wert der verbleibenden Marge kann je nach Bedarf erhöht oder verringert werden.
Obwohl wir die obige Methode empfehlen, kann das CSS für den 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 einen linken Rand von 5 em.
Fügen Sie Leerzeichen unter einer Textzeile oder einem Textabsatz hinzu
Um zusätzlichen Platz unter einer Textzeile oder einem Textabsatz hinzuzufügen oder Text auf der Seite einmal nach unten zu verschieben, können Sie das 
-Tag verwenden.  Unten ist ein Beispiel dafür, 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 Unterbrechungen den Leerraum darüber hinzu.
Bei Bedarf können zusätzliche Pausen hinzugefügt werden.  Wir empfehlen jedoch, die zuvor erwähnte CSS-Methode zu verwenden, um Füll- und Leerzeichen um Ihren Text herum hinzuzufügen, wenn dies an mehreren Stellen auf einer Seite erfolgt.
Zeilenabstand zwischen Textzeilen hinzufügen
Der Abstand zwischen Textzeilen kann durch Erhöhen und Verringern der Zeilenhöhe mithilfe von CSS angepasst werden, um den Text besser lesbar zu machen.  Unten sehen Sie ein Beispiel für zusätzliche Zeilenabstände, die einem Textabsatz hinzugefügt werden.
<p style="line-height:3.5em;">Text shown below with extra spacing</p>
Der obige Code erstellt den unten gezeigten Text.
Dieser Beispieltext ist ein Beispiel dafür, wie zusätzlicher Abstand zwischen Zeilen zu Text hinzugefügt werden kann.  Wir würden jedoch nicht empfehlen, so viel Zeilenabstand zu verwenden, da dies die Lesbarkeit erschwert.  Wir verwenden diesen Zeilenabstand nur als Beispiel.
In unserem obigen Beispiel haben wir 3,5 cm als Zeilenhöhe verwendet, um den Abstand zwischen den Zeilen hervorzuheben.  Aus Gründen der Lesbarkeit empfehlen wir jedoch die Verwendung von etwa 1,7 em.  Das Hinzufügen von zusätzlichem Abstand zwischen den Zeilen verbessert immer die Lesbarkeit Ihres Textes.  Wenn Sie jedoch zu viel hinzufügen, kann es schwieriger werden, zu folgen und zu scannen.