HTML: Mehrere Leerzeichen machen!

HTML, die Sprache für Webseiten, unterstützt in der Regel nicht direkt mehrere Leerzeichen hintereinander. Trotzdem gibt es drei Möglichkeiten, um mehrere Leerzeichen einzugeben:

1. non-breaking spaces
2. preformatted text
3. CSS

Wie man mit diesen drei Optionen mehrere Leerzeichen in den Artikel auf der Webseite eingibt, zeigen wir hier – in der Regel funktioniert das auch in einem CMS wie WordPress, zumindest wenn man statt dem visuellen Eingabe-Modus auf den Text-Modus klickt.

Normalerweise stellen die Webbrowser beim Anzeigen von HTML-Texten immer nur ein Leerzeichen dar, ganz egal wie viele Zeichen der HTML-Code enthält. Das ist in vielen Fällen praktisch, da Zeilenenden im Editor oder versehentlich eingefügte, doppelte Leerzeichen trotzdem nur als ein Leerzeichen angezeigt werden. Möchte man aber (zum Beispiel für einen größeren Abstand) mehrere Leerzeichen in HTML haben, muss man diese Einschränkung mit einem Trick umgehen.

Schnell-Tipp: Mehrere Leerzeichen in HTML

Ein schneller Trick ist, ein Leerzeichen statt mit der “Space”- oder Leer-Taste auf der Tastatur als “non-breaking-space” anzugeben: Der HTML-Code dafür ist:

 

Dieser Code erzeugt ein Leerzeichen im Dokument und wird von dem Browser genau wie ein Leerzeichen angezeigt – anderes als ein normales Leerzeichen lässt sich dieser Code aber auch beliebig wiederholen, um mehrere Leerzeichen in HTML darzustellen:

    

So lassen sich mehrere Leerzeichen auch in HTML darstellen, der Programm-Code wird dadurch aber etwas größer und auch unübersichtlicher. Aussehen könnte das dann mit zusätzlichen Leerzeichen so wie auch oben auf dem Bild zu sehen:

1 2 3       4    5

Der Code dafür sieht so aus:

1 2 3       4    5

Mehrere Leerzeichen mit <pre>

Eine weitere Möglichkeit, mehrere Leerzeichen in HTML Code einzugeben, ist der <pre> Tag: Dieser steht für “preformatted text” und zeigt sowohl viele Leerzeichen hintereinander als auch Zeilenenden an, ohne dass man dafür wie sonst üblich den <br> Tag braucht. Ein Beispiel dafür wäre dieser Code:

<pre>
1
    2

         4 5
              6
</pre>

Hier werden sowohl die Leerzeichen als auch die Zeilenenden direkt übernommen und angezeigt – das sieht dann so aus:

1
    2

         4 5
              6

Allerdings wird für den <pre> Tag durch den Browser in der Regel automatisch eine Schrift mit fester Breite gewählt, zum Beispiel die “Courier”. Wem das nicht gefällt, kann mit CSS aber auch hier das Aussehen verändern und zum Beispiel eine andere Schrift wie die Arial oder die Times wählen:

<pre style="font-family:arial;">

<pre style="font-family:times;">

Mehrere Leerzeichen und Abstände mit CSS

Sollen die Leerzeichen lediglich einen Abstand im Text erzeugen, kann man dies ebenfalls mit CSS erreichen. Der Vorteil hierbei ist, dass man den Abstand sogar Pixel-genau angeben kann:

1 2 3 <span style="margin-left:30px;margin-right:15px;">4</span> 5

Dieser Code sorgt dafür, dass die Zahl “4” einen Abstand von 30 Pixeln nach links (also zwischen “3” und “4”) und einen 15 Pixel großen Abstand nach rechts zur Zahl “5” hat:

1 2 3 4 5