HTML Leerzeichen - mehrere Leerzeichen einfügen

Es kommt öfters die Frage „Wie kriege ich mehrere Leerzeichen hin“ – und erstaunlicherweise gibt es mehr als eine Antwort. Wichtig ist auch das Verständnis, daher bitte den Text bis zum Enden lesen.

Eine schnelle Antwort gibt es natürlich vorneweg:

Es gibt in HTML ein Code, der ein Leerzeichen erzeugt:

  

Schaut man sich das Ergebnis im Browser an, sieht man da nicht so viel. Eher wenn man mehrere nacheinander macht bzw. diese zwischen die Worte schiebt! Es kann kein Umbruch mehr in der Zeile stattfinden bis wieder ein normales Leerzeichen kommt:

 1 normales Leerzeichen vorneweg
 1 erzwungenes Leerzeichen vorneweg
    4 Leerzeichen
Erzwungene Leerzeichen ohne Umbruch

Dieser Code steht für „non breaking space“. Sollen mehrere Leerzeichen erzeugt werden, dann einfach mehrere nacheinander (aber Vorsicht! Solch ein Vorgehensweise hat Ihren Preis, da es eigentlich die Grundphilosophie von HTML verletzt!)

Schaut man sich das Ergebnis im Browser an, sieht es wie folgt aus:

1 normales Leerzeichen vorneweg

 erzwungenes Leerzeichen vorneweg

    4 Leerzeichen

Erzwungene Leerzeichen ohne Umbruch

Anstelle von   kann man auch   für jedes erzwungene Leerzeichen schreiben.

Es funktionieren auch die Anweisungen   und   - das Leerzeichen ist so breit wie ein n bzw m - man kann also mit den Breiten eines Leerzeichens spielen (was in der Regel nicht zielführend ist). Es gibt auch noch   - ein schmales Leerzeichen.

CSS und erzwungene Leerzeichen

Eine andere Vorgehensweise funktioniert über CSS.

.erzwungeneleerzeichen {
    white-space:pre;
}

Die Standardeinstellung ist white-space: nowrap;

Eine weitere interessante Einstellung ist in diesem Fall white-space: pre-wrap; - jetzt wird am rechten Rand der Text umgebrochen, sprich die natürliche Grenze des Elements am rechten Browserfenster wird eingehalten.

Einrückungen per CSS

Geht es nur um eine Einrückung vom linken Rand aus, kann auch in CSS mit dem Innenabstand padding-left: 4em; gearbeitet werden. Der Außenabstand margin-left: 4em; funktioniert auch, würde aber meistens von der Logik nicht ganz passen.

Warum überhaupt HTML Leerzeichen

Natürlich fragt man sich, warum möchte jemand überhaupt mehrere Leerzeichen in HTML? Hier wird oft wegen Einrückungen und z.B. ausrichten von Preisangaben meistens verglicht versucht, die Inhalte auszurichten.

Aber es gibt bessere Varianten zum Ausrichten von Text und Preisangaben.

Eine Preisliste kann man durchaus in einer Tabelle darstellen (hier geht es nicht um Design, sondern etwas, was auch typisch für Preislisten ist).

Machen wir als Beispiel eine Preistabelle mit 3 Spalten. In der ersten Spalte steht die Beschreibung, in der zweiten und dritten Spalte die Preise mit und ohne Mehrwertsteuer. Dazu unser HTML-Code für die Tabelle:

<table id="preisliste">
	<thead>
		<tr>
			<th>Beschreibung</th>
			<th>Preis netto</th>
			<th>Preis brutto</th>
	</thead>
	<tbody>
		<tr>
			<td>Pizza 4 Käse</td>
			<td>12,90</td>
			<td>15,35</td>
		</tr>
		<tr>
			<td>grüner Salat</td>
			<td>6,30</td>
			<td>7,50</td>
		</tr>
		<tr>
			<td>Saltimbocca alla Romana (für 5)</td>
			<td>84,87</td>
			<td>101,--</td>
		</tr>
		<tr>
			<td>Aranciata</td>
			<td>2,43</td>
			<td>2,90</td>
		</tr>
	</tbody>
</table>

Noch sieht unsere Tabelle nicht besonders sexy aus und die Preise sind definitiv nicht untereinander.

Und hier kommt noch CSS ins Spiel. Wir lassen die Preise rechtsbündig anzeigen und als Schriftart nutzen wir eine dicktengleiche (jeder Buchstabe und Ziffer braucht die gleiche Breite).

#preisliste {
    width: 100%;
    font-family: monospace;
}

#preisliste th {
    text-align: left;
}

#preisliste th:nth-child(2),
#preisliste th:nth-child(3),
#preisliste td:nth-child(2),
#preisliste td:nth-child(3) { 
    text-align: right;
}

Und somit haben wir folgendes Aussehen: