Absatzeigenschaften

Absatzeigenschaften werden von allen aktuellen Browsern (und der vorhergehenden Generation) zumeist problemlos interpretiert.
 
 

line-height

Mit line-height kann die Zeilenhöhe definiert werden.

Werte:
normal
Abstand mit relativen oder absolutem Wert
einfache Zahl ohne Zusatz gilt als Multiplikator

Standardeinstellung: normal
Vererbung: ja
Element: alle Elemente

Beispiel:
<div style="line-height: 8px">

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</div>

<div style="line-height: 4">

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</div>

demo: body {line-height: 18pt}
 

 
text-indent

Mit text-indent kann die erste Zeile eines Absatzes um einen definierten Wert eingerückt werden.

Werte:
Abstand mit relativen oder absolutem Wert

Vorsicht: Bei der Verwendung von Prozentangaben kann es zu Fehldarstellungen beim IE 5 Windows kommen.

Standardeinstellung: 0
Vererbung: ja
Element: alle Block-Elemente

Beispiel:
<div style="text-indent: 20px">

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</div>

demo: p {text-indent: 20pt}
 

 
text-align

Mit text-align wird die horizontale Ausrichtung von Text angegeben.

Werte:
left (Text wird linksbündig ausgerichtet)
right (Text wird rechtsbündig ausgerichtet)
center (Text wird zentriert ausgerichtet)
justify (Text wird im – groben – Blocksatz dargestellt)

Standardeinstellung: abhängig von der landesüblichen Einstellung
Vererbung: ja
Element: alle Block-Elemente

Beispiel:
<div style="text-align: right">

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</div>

<div style="text-align: center">

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</div>

<div style="text-align: justify">

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</div>

demo: h1, h2{text-align: center}
 

 
vertical-align

Mit vertical-align wird die vertikale Ausrichtung von Elementen (Text und Grafik) angegeben. Die Anwendung macht Sinn bei
a) Ausrichtung von Inhalten in Tabellenzellen durch CSS
b) Ausrichtung von Inhalten in Containern mit definierter Höhe
c) Ausrichtung von Grafiken in Bezug auf Textzeilen

Werte:
top (Objekt – Text oder Grafik – wird an der Oberkante des größten Elements Grafik in der Zeile ausgerichtet, oder bei Tabellenzellen an der oberen Zeile)

middle (Objekt wird mit mittig in der Zeile Grafik ausgerichtet, oder bei Tabellenzellen in der Zellenmitte)

bottom (Objekt wird an der Unterkante der Zeile Grafik ausgerichtet, oder bei Tabellenzellen an der unteren Zeile)

text-top (Objekt wird mit seinem oberen Rand am oberen Rand Grafik des Elternelements ausgerichtet)

baseline (Objekt wird an der Grundlinie Grafik ausgerichtet)

sub (Objekt wird tiefer 23 gestellt)

super (Objekt wird im höher 23 gestellt)

text-bottom (Objekt wird mit seinem unteren Rand am oberen Rand Grafik des Elternelements ausgerichtet)

Standardeinstellung: baseline
Vererbung: nein
Element: Tabellenzellen & Inline-Elemente (Elemente, die keinen Zeilenumbruch herbeiführen wie <a>, <span>, <strong><img> etc)

Beispiel:
div (vertical-align: super}

demo (Klasse bereits angelegt, zeigen):
.t1 {vertical-align: top}
.t2 {vertical-align: bottom}
Aufgabe: aufgabe_text.html  (2.Teil)

 

 
white-space

Mit white-space kann der Umgang mit Tabs und Leerzeichen definiert werden

Werte:
normal (Standard-XHTML-Umgang mit Leerzeichen im Quelltext: nur eines wird angezeigt)

pre (die Textformatierung im Quelltext wird identisch übernommen – ähnlich <pre>–)

nowrap (hiermit werden Zeilenumbrüche innerhalb so ausgezeichneter Elemente unterdrückt – ähnlich <nobr>–)

Standardeinstellung: normal
Vererbung: ja
Element: alle Block-Elemente

Beispiel:
<div style="white-space: pre">

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</div>