SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

| ## Style-Sheet-Angaben: Abstände, Ränder, Ausrichtung
| Allgemeines zu Abständen, Rändern und Ausrichtung Abstand/Rand oben (margin-top) Abstand/Rand unten (margin-bottom) Abstand/Rand links (margin-left) Abstand/Rand rechts (margin-right) Abstand/Rand allgemein (margin) Texteinrückung (text-indent) Zeilenhöhe (line-height) Vertikale Ausrichtung (vertical-align) Horizontale Ausrichtung (text-align, alignment) Textumbruch (white-space)

## Allgemeines zu Abständen, Rändern und Ausrichtung

Sinnvoll sind die hier beschriebenen Angaben für alle HTML-Tags, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für `<h[1-6]>`, `<p>`, `<blockquote>`, `<address>` oder `<pre>`. Blockelemente sind aber auch HTML-Tags wie `<div>`, `<table>`, `<tr>`, `<th>` und `<td>`. Auch auf `<body>` lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall wird der gesamte sichtbare Körper einer HTML-Datei wie ein Block behandelt.

Rand bzw. Abstand bedeutet: der Rand/Abstand des aktuellen Elements zu seinem logischen "Eltern-Element". Im normalen Fließtext ist dies das `<body>`-Tag, innerhalb einer Tabellenzelle etwa ist es jedoch das `<td>`- oder `<th>`-Tag, in dem sich das aktuelle Element befindet. Wenn das aktuelle Element etwa innerhalb eines `<div>`-Tags vorkommt, das selbst Ränder bzw. Abstände definiert, sind die Angaben relativ dazu.

Mit negativen Werten, also Angaben wie beispielsweise -18mm, können Sie für besondere gestalterischen Zwecke erreichen, daß sich Elemente überlappen. An anderer Stelle innerhalb dieses Dokuments finden Sie ein Beispiel dafür.

## Abstand/Rand oben (margin-top)

Anzeigebeispiel: So sieht's aus

Sie können den oberen Abstand/Rand eines Elements zu seinem vorausgehenden Element festlegen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      h1,h2,h3 { margin-top:2cm; }
      div.beispiel { margin-top:30px; }
      div.beispiel h1,h2,h3 { margin-top:1cm; }
    </style>

### Erläuterung:

Mit `margin-top:` können Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine numerische Angabe. Im obigen Beispiel wird für Überschriften 1., 2. und dritter Ordnung ein vorausgehender Abstand von 2cm definiert. Ferner wird eine Klasse `beispiel` für das `<div>`-Tag definiert. Solche Bereiche haben laut Definition im Beispiel 30 Pixel Abstand zu ihrem vorausgehenden Element. Für Überschriften 1., 2. und 3. Ordnung, die innerhalb eines solchen Bereichs vorkommen, wird ein Abstand von 1cm festgelegt.

### Beachten Sie:

Netscape 4.x und der MS Internet Explorer (3.x, 4.x) reagieren zum Teil unterschiedlich, wenn ein Element einen definierten Abstand unten enthält und ein nachfolgendes Element einen Abstand oben.
Bei Netscape hat die Angabe `margin-top` (für den Abstand oben) in jedem Fall Vorrang vor der Angabe `margin-bottom` (für den Abstand unten). Wenn also ein Element einen Abstand unten von 1cm hat und ein nachfolgendes Element einen Abstand oben von 2cm, dann stellt Netscape die beiden Elemente in einem Abstand von 2cm dar.
Der MS Internet Explorer vergleicht beide Angaben und interpretiert diejenige mit dem höheren Wert. Wenn also ein Element einen Abstand unten von 1cm hat und ein nachfolgendes Element einen Abstand oben von 2cm, dann stellt auch der Internet Explorer beiden Elemente in einem Abstand von 2cm dar. Wenn aber das obere Element einen Abstand unten von 3cm hat und das nachfolgende Element einen Abstand oben von 2cm, erweitert der Internet Explorer den Abstand der beiden Elemente auf 3cm, während Netscape den Abstand bei 2cm beläßt.

## Abstand/Rand unten (margin-bottom)

Anzeigebeispiel: So sieht's aus

Sie können den unteren Abstand/Rand eines Elements zu seinem nachfolgenden Element festlegen.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="margin-bottom:20pt">Text</p>
    <p style="margin-top:15pt">Text</p>

### Erläuterung:

Mit `margin-bottom:` können Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine numerische Angabe. Im obigen Beispiel wird für einen Absatz im Text ein Abstand von 20pt zum nächsten Absatz definiert.

### Beachten Sie:

Netscape 4.x und der MS Internet Explorer (3.x, 4.x) reagieren zum Teil unterschiedlich, wenn ein Element einen definierten Abstand unten enthält und ein nachfolgendes Element einen Abstand oben.
Bei Netscape hat die Angabe `margin-top` (für den Abstand oben) in jedem Fall Vorrang vor der Angabe `margin-bottom` (für den Abstand unten). Wenn also ein Element einen Abstand unten von 20pt hat und ein nachfolgendes Element einen Abstand oben von 15pt (so wie im Beispiel oben), dann stellt Netscape die beiden Elemente in einem Abstand von 15pt dar.
Der MS Internet Explorer vergleicht beide Angaben und interpretiert diejenige mit dem höheren Wert. Wenn also ein Element einen Abstand unten von 20pt hat und ein nachfolgendes Element einen Abstand oben von 15pt, dann stellt der Internet Explorer beide Elemente in einem Abstand von 20pt dar.

## Abstand/Rand links (margin-left)

Anzeigebeispiel: So sieht's aus

Sie können den linken Abstand/Rand eines Elements festlegen. Wenn das Element einen linken Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die zweite der beiden), dann bedeutet die Angabe den Abstand zum links davon liegenden Element. Wenn das Element keinen linken Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das `<body>`-Tag festgelegt ist). Wenn kein übergeordnetes Elternelement mehr da ist (etwa beim `<body>`-Tag selbst), dann bezieht sich die Angabe auf den linken Abstand des Elements zum Anzeigefenster.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      body { margin-left:20px; }
      p,ul,ol,blockquote,table,img { margin-left:15px; }
      hr { margin-left:-20px; }
    </style>

### Erläuterung:

Mit `margin-left:` können Sie den Rand/Abstand links bestimmen. Erlaubt ist eine numerische Angabe. Im obigen Beispiel wird zunächst ein globaler linker Seitenrand von 20 Pixeln definiert, indem diese Angabe dem `<body>`-Tag zugewiesen wird. Für Fließtextabsätze, Listen, Zitate, Tabellen und Grafiken wird zusätzlich ein linker Rand von 15 Pixeln definiert, sodaß sich bei diesen Elementen isg. ein linker Rand von 35 Pixeln zum linken Fensterrand ergibt. Überschriften etwa, für die nichts weiter festgelegt ist, erscheinen dann links ausgerückt. Für Trennlinien wird in dem Beispiel ein negativer linker Rand von -20 Pixeln definiert. Dadurch können Trennlinien trotz des definierten seitenglobalen linken Randes von 20 Pixeln ganz vorne von links beginnen.

### Beachten Sie:

Wenn Sie beispielsweise zwei Grafiken nebeneinander referenzieren und dabei mit Werten für `margin-left` oder `margin-right` arbeiten, reagiert Netscape (4.x) zum Teil sehr unterschiedlich und nicht besonders nachvollziehbar.

## Abstand/Rand rechts (margin-right)

Anzeigebeispiel: So sieht's aus

Sie können den rechten Abstand/Rand eines Elements festlegen. Wenn das Element einen rechten Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die erste der beiden), dann bedeutet die Angabe den Abstand zum rechts davon liegenden Element. Wenn das Element keinen rechten Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das `<body>`-Tag festgelegt ist.). Wenn kein übergeordnetes Elternelement mehr da ist (etwa beim `<body>`-Tag selbst), dann bezieht sich die Angabe auf den rechten Abstand des Elements zum Anzeigefenster.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="bild1.gif" style="margin-right:1cm">

### Erläuterung:

Mit `margin-right:` können Sie den Rand/Abstand rechts bestimmen. Erlaubt ist eine numerische Angabe. Im obigen Beispiel erhält eine referenzierte Grafik einen rechten Abstand von 1cm.

### Beachten Sie:

Netscape 4.x ignoriert `margin-right`.

## Abstand/Rand allgemein (margin)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden fakultativen Einzelangaben:
margin-top
margin-bottom
margin-left
margin-right

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      body { margin:2cm; } /* 2cm oben, rechts, unten und links */
      p.typA { margin: 1cm 2cm; } /* 1cm oben und unten, 2 cm rechts und links */
      p.typB { margin: 1cm 2cm 3cm; } /* 1cm oben, 2cm rechts und links und 3 cm unten */
      p.typC { margin: 1cm 2cm 3cm 4cm; } /* 1cm oben, 2cm rechts, 3 cm unten und 4 cm links */
    </style>

### Erläuterung:

Mit `margin:` können Sie einen einheitlichen Rand/Abstand für oben, unten, links und rechts bestimmen. Erlaubt sind ein bis vier numerische Angaben.

Eine Angabe bedeutet: alle vier Ränder erhalten den gleichen Abstand/Rand.

Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite Zahl den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.

## Texteinrückung (text-indent)

Anzeigebeispiel: So sieht's aus

Sie können für einen mehrzeiligen Fließtext bestimmen, daß die erste Zeile eingerückt wird. Dieses Gestaltungselement ist in Büchern und Zeitschriften sehr verbreitet.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="text-indent:7.5mm">viel Text</p>

### Erläuterung:

Mit `text-indent:` können Sie eine Einrückung für die erste Zeile bestimmen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Mit einem negativen Wert für `text-indent` bewirken Sie eine Textausrückung in der ersten Fließtextzeile.

## Zeilenhöhe (line-height)

Anzeigebeispiel: So sieht's aus

Sie können für Elemente mit viel Fließtext die Zeilenhöhe bestimmen. Diese Angabe ist vor allem in Verbindung mit einer Angabe zur Schriftgröße interessant.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      p.gross { font-size:14pt; line-height:16pt; }
      p.klein { font-size:8pt; line-height:8pt; }
    </style>

### Erläuterung:

Mit `line-height:` können Sie die Zeilenhöhe bestimmen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Bei erzwungener Zeilenhöhe ist es denkbar, daß ein interpretierendes Programm dieser Angabe den Vorrang einräumt und Elemente abschneidet, die höher sind, beispielsweise eine im Fließtext referenzierte Grafik.

## Vertikale Ausrichtung (vertical-align)

Anzeigebeispiel: So sieht's aus

Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpsassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile im Verhältnis zueinander ausrichten.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <table>
    <tr>
    <td style="vertical-align:top">...</td>
    <td style="vertical-align:middle">...</td>
    <td style="vertical-align:bottom">...</td>
    </tr>
    </table>

### Erläuterung:

Mit `vertical align:` können Sie die vertikale Ausrichtung bestimmen. Folgende Angaben sind möglich:

`top` = obenbündig ausrichten.
`middle` = mittig ausrichten.
`bottom` = untenbündig ausrichten.
`baseline` = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt).
`sub` = tieferstellen (ohne die Schriftgröße zu reduzieren).
`super` = höherstellen (ohne die Schriftgröße zu reduzieren).
`text-top` = am oberen Schriftrand ausrichten.
`text-bottom` = am unteren Schriftrand ausrichten.

Bei Fließtext ist auch eine prozentuale Angabe ist möglich. Die Ausrichtung orientiert sich dann an der elementeigenen Zeilenhöhe.

## Horizontale Ausrichtung (text-align, alignment)

Anzeigebeispiel: So sieht's aus

Sie können Textabsätze ausrichten.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      p,blockquote { text-align:justify }
      p,blockquote { alignment:justify }
    </style>

### Erläuterung:

Mit `text-align:` oder `alignment:` können Sie gewünschte Elemente für Textinhalte ausrichten. Folgende Angaben sind möglich:

`left` = linksbündig ausrichten (Voreinstellung).
`center` = zentriert ausrichten.
`right` = rechtsbündig ausrichten.
`justify` = als Blocksatz ausrichten.

### Beachten Sie:

In Version 1.0 der CSS-Style-Sheets wurde die Syntax `text-align` vorgeschlagen, die auch in Netscape und im MS Internet Explorer implementiert ist. In der Version 2.0 der CSS-Sprache schlägt das W3-Konsortium die Syntax `alignment` vor, die jedoch von den Browsern (noch) nicht interpretiert wird. Die Verwendung von `text-align` ist derzeit vorzuziehen, weil sie näher an der Praxis ist.

## Textumbruch (white-space)

Anzeigebeispiel: So sieht's aus

Sie können festlegen, wie der Zeilenumbruch innerhalb von Elementen mit Text erfolgen soll.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="white-space:pre">Text
    Text</p>
    <p style="white-space:nowrap">Text Text</p>

### Erläuterung:

Mit `white-space:` können Sie das Verhalten für den Zeilenumbruch festlegen. Folgende Angaben sind möglich:

`normal` = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
`pre` = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>).
`nowrap` = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags.

### Beachten Sie:

Diese Angabe gehört zur Version 2.0 der Style-Sheet-Sprache. Der MS Internet Explorer 4.0 interpretiert sie noch gar nicht, Netscape 4.0 interpretiert zumindest den Wert `pre`.

weiter: | Style-Sheet-Angaben: Rahmen und Innenabstände
zurück: | Style-Sheet-Angaben: Schriftformatierung mit Schriftartendatei

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

© 1998 Stefan Münz, muenz@csi.com