decocode decocode deco    

Schrift- und Textformatierung #

Übersicht
Schriftart – font-family
Schriftgröße – font-size
Schriftstärke – font-weight
Kursiver Text – font-style
Kapitälchen – font-variant
Schrift – font
Groß-/Kleinschreibung – text-transform
Vertikale Ausrichtung – vertical-align
Zeichenabstand – letter-spacing
Textdekoration Linie – text-decoration-line
Textdekoration Farbe – text-decoration-color
Textdekoration Stil – text-decoration-style
Textdekoration – text-decoration
Textdekoration unterbrechen – text-decoration-skip
Absatzausrichtung – text-align
Erste Zeile einrücken – text-indent
Zeilenhöhe – line-height

Auf dieser Seite werden die wichtigsten CSS-Eigenschaften vorgestellt, mit denen Schrift und Text eines HTML-​Dokuments formatiert werden können, wie man es beispielsweise auch von einem normalen Textverarbei­tungsprogramm gewohnt ist. Schriftart, -größe und -farbe, fetter und kursiver Satz, aber auch speziellere Auszeichnungen wie Kapitälchen oder gesperrter Satz können auf einen Text angewendet werden. Weiterhin lässt sich die Ausrichtung eines Textes innerhalb eines Absatzes, das Einrücken der ersten Absatzzeile und die Zeilenhöhe festlegen. Alle Eigenschaften werden durch Beispiele demonstriert, mit denen auch mögliche Unterschiede in der Darstellung bei verschiedenen Browsern verglichen werden können.

Schriftart – font-family #

Zur Verwendung serverseitiger Fonts siehe: @font-face

Um einen Text in einer bestimmten Schriftart (Font) darzustellen, wird dieser mit der CSS-Eigenschaft font-family formatiert. Diese Eigenschaft erwartet mindestens einen Schriftnamen als Wert. Praktischerweise sollte man aber immer eine Reihe alternativer Schriftarten (sog. ›Fallback-Fonts‹) angeben, die in dem Fall verwendet werden können, wenn eine davor deklarierte Schriftart auf dem Rechner des Benutzers nicht installiert ist. Ein Browser wird versuchen, die erste deklarierte Schriftart zu verwenden. Ist diese nicht installiert, wird nach der zweiten gesucht, und so weiter. Als letzte Alternative solle man dann noch einen ›generischen‹ Schriftnamen angeben, damit wenigstens eine halbwegs ähnliche Systemschriftart, die im Browser eingestellt ist, verwendet werden kann, falls keine einzige der angegebenen Alternativen möglich ist. Generische Schriftnamen sind keine eigentlichen Namen eines bestimmten Fonts, sondern bezeichnen eine Gruppe von Schriftarten, die ähnliche Eigenschaften besitzen:

serif – für Schriften mit Serifen
sans-serif – für Schriften ohne Serifen
monospace – für dicktengleiche Schriften
cursive – für besondere kursive Schriften
fantasy – für alle anderen Schriften

Font-Namen, die ein Leerzeichen enthalten (z. B. ›DejaVu Sans‹), müssen in Anführungzeichen gesetzt werden.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-family:"DejaVu Serif", Georgia, "Times New Roman", serif;'>Lorem ipsum dolor sit amet.</p>
<p style='font-family:"DejaVu Sans", Verdana, Arial, sans-serif;'>Consetetur sadipscing elitr.</p>
<p style='font-family:monospace;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Schriftgröße – font-size #

Die Größe einer Schrift wird über die Eigenschaft font-size definiert. Als Wert eignen sich z. B. absolute Werte in Pixeln oder auch bestimmte Schlüsselworte wie z. B. small oder large. Mehr dazu siehe W3C-Spezifikation.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-size:20px;'>Lorem ipsum dolor sit amet.</p>
<p style='font-size:1.8em;'>Consetetur sadipscing elitr.</p>
<p style='font-size:small;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Schriftstärke – font-weight #

Über die Eigenschaft font-weight kann die Strichstärke einer Schrift eingestellt werden. Üblicherweise wird man die Werte normal oder bold (für fette Schrift) verwenden. Es sind aber auch numerische Angaben möglich, die in der Regel jedoch keinen besonderen Nutzen bringen.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-weight:bold;'>Lorem ipsum dolor sit amet.</p>
<p style='font-weight:normal;'>Consetetur sadipscing elitr.</p>
<p style='font-weight:900;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Kursiver Text – font-style #

Über die Eigenschaft font-style kann eingestellt werden, ob die Schrift normal oder kursiv dargestellt wird. Möglich sind folgende Werte:

normal – in der Regel aufrechte Darstellung
italic – kursive Darstellung
oblique – ›verschiefte‹ oder ›faux italic‹ Darstellung, wenn vorhanden

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-style:italic;'>Lorem ipsum dolor sit amet.</p>
<p style='font-style:normal;'>Consetetur sadipscing elitr.</p>
<p style='font-style:oblique;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Kapitälchen – font-variant #

Über die Eigenschaft font-variant kann eingestellt werden, ob die Schrift normal oder als Kapitälchen dargestellt wird. Möglich sind folgende Werte:

normal – normale Darstellung
small-caps – Darstellung als Kapitälchen

Hier ein paar Beispiele:

Quelltext auswählen
1
2
<p style='font-variant:small-caps;'>Lorem ipsum dolor sit amet.</p>
<p style='font-variant:normal;'>Consetetur sadipscing elitr.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Schrift – font #

Über die Eigenschaft font können folgende Eigenschaften in einer einzigen Definition eingestellt werden:

font-style – Kursiver Text
font-variant – Kapitälchen
font-weight – Schriftstärke
font-size – Schriftgröße
line-height – Zeilenhöhe (siehe unten)
font-family – Schriftart

Es müssen nicht alle Angaben gemacht werden, aber sie müssen in der obigen Reihenfolge notiert werden. Schriftgröße und Zeilenhöhe werden durch ein Slash / getrennt.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
<p style='font:bold small-caps italic 20px/2em "DejaVu Sans", Verdana, sans-serif;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p style='font:17px serif;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Groß-/Kleinschreibung – text-transform #

Über die Eigenschaft text-transform lässt sich einstellen, ob Text in normaler, Klein- oder Großschreibung dargestellt wird. Mögliche Werte außer none (normale Darstellung) sind:

capitalize – das erste Zeichen jedes Wortes wird groß gesetzt
uppercase – alle Zeichen werden groß gesetzt
lowercase – alle Zeichen werden klein gesetzt

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='text-transform:capitalize;'>Lorem ipsum dolor sit amet.</p>
<p style='text-transform:uppercase;'>Consetetur sadipscing elitr.</p>
<p style='text-transform:lowercase;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Vertikale Ausrichtung – vertical-align #

Über die Eigenschaft vertical-align lässt sich die vertikale Ausrichtung eines Inline-Elements einstellen. Mögliche Werte sind:

baseline – Grundlinie
top – Oberkante
middle – Mitte
bottom – Unterkante
text-top – Textoberkante
text-bottom – Textunterkante
super – Position für höher gestellte Zeichen
sub – Position für tiefer gestellte Zeichen

Außerdem kann ein Zahlenwert in den üblichen Einheiten wie px oder em sowie ein Prozentwert angegeben werden.

Der Nutzen dieser Eigenschaft erschließt sich nicht unbedingt sofort, allerdings kann sie manchmal hilfreich sein, um Grafiken, die Teil eines Textflusses sind, auszurichten, wobei es praktischer ist, in einem solchen Fall Zahlenwerte statt der Schlüsselwörter zu verwenden, da man diese Elemente so genauer positionieren kann.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p style='text-transform:uppercase;padding:20px;background-color:#333;'>
  lorem <img src='img/orangebox.png' style='vertical-align:text-top;' alt='Box' title='text-top'> 
  ipsum <img src='img/orangebox.png' style='vertical-align:top;' alt='Box' title='top'>
  dolor <img src='img/orangebox.png' style='vertical-align:super;' alt='Box' title='super'>
  sit <img src='img/orangebox.png' style='vertical-align:middle;' alt='Box' title='middle'>
  amet <img src='img/orangebox.png' style='vertical-align:baseline;' alt='Box' title='baseline'>
  lorem <img src='img/orangebox.png' style='vertical-align:sub;' alt='Box' title='sub'>
  ipsum <img src='img/orangebox.png' style='vertical-align:bottom;' alt='Box' title='bottom'>
  dolor <img src='img/orangebox.png' style='vertical-align:text-bottom;' alt='Box' title='text-bottom'> amet
</p>

<p style='text-transform:uppercase;padding:20px;margin-bottom:20px;background-color:#444;'>
  lorem <img src='img/orangebox.png' style='vertical-align:9px;' alt='Box' title='9px'> 
  ipsum <img src='img/orangebox.png' style='vertical-align:6px;' alt='Box' title='6px'>
  dolor <img src='img/orangebox.png' style='vertical-align:3px;' alt='Box' title='3px'>
  sit <img src='img/orangebox.png' style='vertical-align:0px;' alt='Box' title='0px'>
  amet <img src='img/orangebox.png' style='vertical-align:-3px;' alt='Box' title='-3px'>
  lorem <img src='img/orangebox.png' style='vertical-align:-6px;' alt='Box' title='-6px'>
  ipsum <img src='img/orangebox.png' style='vertical-align:-9px;' alt='Box' title='-9px'> dolor
</p>

Dieser Code führt zu folgender Darstellung. In der oberen Reihe sind die Grafiken mit den Schlüsselbegriffen ausgerichtet, in der unteren mit Zahlenwerten. Wenn man eine Grafik mit der Maus überfährt, wird der entsprechende Wert angezeigt:

lorem Box ipsum Box dolor Box sit Box amet Box lorem Box ipsum Box dolor Box amet

lorem Box ipsum Box dolor Box sit Box amet Box lorem Box ipsum Box dolor

Zeichenabstand – letter-spacing #

Über die Eigenschaft letter-spacing kann der Zeichenabstand eines Textes eingestellt werden (sog. Sperrsatz). Moglich ist der Wert normal oder ein numerischer Wert z. B. in Pixeln oder als Anteil der Em-Länge.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='letter-spacing:2px;'>Lorem ipsum dolor sit amet.</p>
<p style='letter-spacing:-.1em;'>Consetetur sadipscing elitr.</p>
<p style='letter-spacing:.5em;'>Sed diam nonumy eirmod tempor.</p>2px

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Textdekoration Linie - text-decoration-line #

Über die Eigenschaft text-decoration-line lässt sich die Position einer Linie bestimmen, mit der Text ausgezeichnet werden soll. Mögliche Werte neben none (ohne Auszeichnung) sind:

underline – unterstrichen
overline – überstrichen
line-through – durchgestrichen

Beispiele:

Quelltext auswählen
1
2
3
<p style='text-decoration-line:underline;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:overline;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:line-through;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Textdekoration Farbe - text-decoration-color #

Über die Eigenschaft text-decoration-color lässt sich die Farbe der Linie festlegen, mit der Text ausgezeichnet werden soll. Es können die üblichen Farbwerte verwendet werden.

Beispiele:

Quelltext auswählen
1
2
3
<p style='text-decoration-line:underline;text-decoration-color:#ff0000;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:overline;text-decoration-color:yellow;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:line-through;text-decoration-color:hsl(130,85%,50%);'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Textdekoration Stil - text-decoration-style #

Über die Eigenschaft text-decoration-style lässt sich der Stil der Linie festlegen, mit der Text ausgezeichnet werden soll. Mögliche Werte sind:

solid – durchgehende Linie
double – doppelte Linie
dotted – gepunktete Linie
dashed – gestrichelte Linie
wavy – wellenförmige Linie

Beispiele:

Quelltext auswählen
1
2
3
4
5
6
<p style='text-decoration-line:underline;text-decoration-style:solid;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:underline;text-decoration-style:double;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:underline;text-decoration-style:dotted;'>Sed diam nonumy eirmod tempor.</p>
<p style='text-decoration-line:underline;text-decoration-style:dashed;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:underline;text-decoration-style:wavy;'>Consetetur sadipscing elitr.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Textdekoration – text-decoration #

Über die Eigenschaft text-decoration lassen sich die Eigenschaften text-decoration-line, text-decoration-color und text-decoration-style zusammenfassen.

Beispiele:

Quelltext auswählen
1
2
3
<p style='text-decoration:underline yellow solid;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration:overline #ff0000 dashed;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration:line-through hsl(130,85%,50%) wavy;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Textdekoration überspringen - text-decoration-skip #

Mit der Eigenschaft text-decoration-skip lässt sich festlegen, ob eine Textdekoration unter bestimmten Bedingungen unterbrochen werden soll. Mögliche Werte sind:

none – keine Unterbrechung
ink – Unterbrechung bei Überschneidung mit dem Text
objects
spaces
edges
box-decoration

Diese Eigenschaft ist gegenwärtig offenbar weder in WebKit noch in Gecko vollständig implementiert. Lediglich der Wert ink funktioniert bei WebKit (außer bei text-decoration-line:line-through;). Man beachte das unterschiedliche Rendering zwischen WebKit und Gecko bei hochgestellten Zeichen.
Siehe auch Can I Use.

Beispiele:

Quelltext auswählen
1
2
3
<p style='text-decoration:underline red solid;text-decoration-skip:ink;'>Lorem ipsum dolor sit amet<sup>2</sup>.</p>
<p style='text-decoration:overline yellow solid;text-decoration-skip:ink;'>ÂConsetetur sadipscing elitr.</p>
<p style='text-decoration:line-through blue solid;text-decoration-skip:ink;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet2.

ÂConsetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Absatzausrichtung – text-align #

Über die Eigenschaft text-align lässt sich die horizontale Ausrichtung des Textes eines Absatzes einstellen. Mögliche Werte sind:

left – linksbündiger Flattersatz
right – rechtsbündiger Flattersatz
center – zentriert bzw. Mittelachsensatz
justifyBlocksatz

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
<p style='text-align:left;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:right;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:center;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:justify;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Erste Zeile einrücken – text-indent #

Über die Eigenschaft text-indent lässt sich einstellen, wie weit die erste Zeile eines Absatzes eingerückt wird. Mögliche Werte außer 0 sind:

• ein Zahlenwert mit Einheit gibt einen festen Wert an
• ein Prozentwert bezieht sich auf die Breite des Absatzes

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
<p style='text-indent:0;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:10%;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:3em;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:-20px;padding-left:40px;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Zeilenhöhe – line-height #

Über die Eigenschaft line-height lässt sich die Zeilenhöhe eines Absatzes einstellen. Mögliche Werte außer normal sind:

• ein Zahlenwert ohne Einheit gilt als Multiplikator für die Schriftgröße
• ein Prozentwert bezieht sich ebenfalls auf die Schriftgröße
• ein Zahlenwert mit Einheit gibt einen festen Wert an

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
<p style='line-height:normal;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:1.5;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:180%;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:.8em;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet