SELFHTML: CSS / Style-Sheet-Angaben / Rahmen/Innenabstände
Description: (SELFHTML 7.0) Übersicht zu CSS-Style-Sheet-Angaben, um Absatztypen oder andere Blockelemente wie etwa Tabellenzellen mit Rahmen individuell zu gestalten
Keywords: SELFHTML, HTML, CSS, Style-Sheets

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

| ## Style-Sheet-Angaben: Rahmen und Innenabstände
| Allgemeines zu Rahmen und Innenabständen Rahmendicke oben (border-top-width) Rahmendicke unten (border-bottom-width) Rahmendicke links (border-left-width) Rahmendicke rechts (border-right-width) Rahmendicke alle Seiten (border-width) Rahmenfarbe (border-color) Rahmentyp (border-style) Rahmen oben allgemein (border-top) Rahmen unten allgemein (border-bottom) Rahmen links allgemein (border-left) Rahmen rechts allgemein (border-right) Rahmen allgemein (border) Innenabstand oben (padding-top) Innenabstand unten (padding-bottom) Innenabstand links (padding-left) Innenabstand rechts (padding-right) Innenabstand alle Seiten (padding)

## Allgemeines zu Rahmen und Innenabständen

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 `<center>`, `<div>`, `<table>`, `<tr>`, `<th>` und `<td>`. So ist es beispielsweise möglich, eine blinde Tabelle zu definieren, in der aber doch einzelne Zellen einen Rahmen nach Wunsch erhalten - nämlich mit Hilfe von Style-Sheet-Angaben. Auch auf `<body>` lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall wird um den gesamten sichtbaren Körper einer HTML-Datei ein Rahmen gezeichnet.

Wenn Sie nichts bei Rahmendefinitionen nichts weiter angeben, kann es sein, daß die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.

Netscape und der MS Internet Explorer interpretieren die Angaben zur Rahmendefinition leider recht unterschiedlich. In den jeweiligen Abschnitten wird auf die Besonderheiten hingewiesen. Beachten Sie die Hinweise aufmerksam, um Style-Sheet-Angaben so zu notieren, daß sie mit beiden Browsern den gewünschten Effekt erzielen.

In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. so ist es sinnvoll, nicht nur eine Rahmendicke anzugeben, sondern auch die gewünschte Rahmenfarbe.

## Rahmendicke oben (border-top-width)

Anzeigebeispiel: So sieht's aus

Sie können für eine Rahmenlinie an der Oberseite eines Elements die Dicke festlegen.

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

    <style type="text/css">
      h1,h2,h3 { border-top-width:thin; border-top-style:solid; }
      body { border-top-width:5mm; border-top-style:groove; }
    </style>

### Erläuterung:

Mit `border-top-width:` können Sie die Stärke der Linie über dem Element bestimmen. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:

`thin` = dünn.
`medium` = mittelstark.
`thick` = dick.

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `border-top-width` nur, wenn außerdem die Angabe `border-top-style` notiert wird. Dabei gelten die gleichen Möglichkeiten wie beim Rahmentyp (border-style), also etwa:
`<p style="border-top-style:solid; border-top-width:thin">`
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.

Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie `width:100%` oder `width:500px`.

## Rahmendicke unten (border-bottom-width)

Anzeigebeispiel: So sieht's aus

Sie können für eine Rahmenlinie an der Unterseite eines Elements die Dicke festlegen.

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

    <p style="border-bottom-width:2pt; border-bottom-style:solid;">Text</p>

### Erläuterung:

Mit `border-bottom-width:` können Sie Stärke der Linie unter dem Element bestimmen. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:

`thin` = dünn.
`medium` = mittelstark.
`thick` = dick.

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `border-bottom-width` nur, wenn außerdem die Angabe `border-bottom-style` notiert wird. Dabei gelten die gleichen Möglichkeiten wie beim Rahmentyp (border-style), also etwa:
`<p style="border-bottom-style:solid; border-bottom-width:thin">`
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.

Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie `width:100%` oder `width:500px`.

## Rahmendicke links (border-left-width)

Anzeigebeispiel: So sieht's aus

Sie können für eine Rahmenlinie an der linken Seite eines Elements die Dicke festlegen.

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

    <style type="text/css">
      blockquote.brecht { border-left-width:1cm; border-left-style:inset; }
    </style>

### Erläuterung:

Mit `border-left-width:` können Sie Stärke der Linie links neben dem Element bestimmen. Die Linie erstreckt sich über die Höhe, die das Element in Anspruch nimmt. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:

`thin` = dünn.
`medium` = mittelstark.
`thick` = dick.

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `border-left-width` nur, wenn außerdem die Angabe `border-left-style` notiert wird. Dabei gelten die gleichen Möglichkeiten wie beim Rahmentyp (border-style), also etwa:
`<p style="border-left-style:solid; border-left-width:thin">`
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.

Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie `width:100%` oder `width:500px`.

## Rahmendicke rechts (border-right-width)

Anzeigebeispiel: So sieht's aus

Sie können für eine Rahmenlinie an der rechten Seite eines Elements die Dicke festlegen.

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

    <blockquote style="border-right-width:thin; border-right-style:outset;quot;>Text</blockquote>

### Erläuterung:

Mit `border-right-width:` können Sie Stärke der Linie rechts neben dem Element bestimmen. Die Linie erstreckt sich über die Höhe, die das Element in Anspruch nimmt. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:

`thin` = dünn.
`medium` = mittelstark.
`thick` = dick.

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `border-right-width` nur, wenn außerdem die Angabe `border-right-style` notiert wird. Dabei gelten die gleichen Möglichkeiten wie beim Rahmentyp (border-style), also etwa:
`<p style="border-right-style:solid; border-right-width:thin">`
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.

Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie `width:100%` oder `width:500px`.

## Rahmendicke alle Seiten (border-width)

Anzeigebeispiel: So sieht's aus

Sie können für einen Rahmen rund um ein Element die Dicke festlegen.

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

    <style type="text/css">
      img.spezial { border-width:2cm; border-style:groove; }
    </style>

### Erläuterung:

Mit `border-width:` können Sie Stärke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe für die Linienstärke oder einer der folgenden Werte:

`thin` = dünn.
`medium` = mittelstark.
`thick` = dick.

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `border-width` nur, wenn außerdem der Rahmentyp (border-style), angegeben wird, also etwa:
`<p style="border-style:solid; border-width:thin">`
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.

Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie `width:100%` oder `width:500px`.

## Rahmenfarbe (border-color)

Anzeigebeispiel: So sieht's aus

Sie können für einen Rahmen, den Sie für bestimmte oder alle Seiten eines Elements definieren, die Farbe festlegen.

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

    <div style="border-width:1cm; border-style:solid; border-color:#99CCFF;">Text</div>

### Erläuterung:

Mit `border-color:` können Sie die Rahmenfarbe bestimmen. Erlaubt ist eine Farbangabe.

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `border-color` nur, wenn außerdem der Rahmentyp (border-style), angegeben wird, also etwa:
`<p style="border-style:solid; border-color:red">`
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.

## Rahmentyp (border-style)

Anzeigebeispiel: So sieht's aus

Sie können für einen Rahmen, die Sie für bestimmte oder alle Seiten eines Elements definieren, das Erscheinungsbild des Rahmens festlegen.

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

    <style type="text/css">
      .Achtung { border-style:double; border-width:1cm; }
    </style>

### Erläuterung:

Mit `border-style:` können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben.

`none` = kein Rahmen (bzw. unsichtbarer Rahmen).
`dotted` = gepunktet.
`dashed` = gestrichelt.
`solid` = durchgezogen.
`double` = doppelt durchgezogen.
`groove` = 3D-Effekt.
`ridge` = 3D-Effekt.
`inset` = 3D-Effekt.
`outset` = 3D-Effekt.

### Beachten Sie:

Netscape 4.x interpretiert die Angabe `border-style` nur, wenn außerdem die Rahmendicke (border-width) notiert wird, also etwa:
`<p style="border-style:solid; border-width:thin">`
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden Beispiel wählen und beide Angaben notieren.

Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie `width:100%` oder `width:500px`.

Einige der Effekte (z.B. `groove`) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.

Beide Browser interpretieren die Angaben zu `border-style` nicht vollständig.

## Rahmen oben allgemein (border-top)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-top-width
border-(top)-style
border-color

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

    <p style="border-top:thick inset rgb(192,192,255);">Text</p>

### Erläuterung:

Mit `border-top:` können Sie das Aussehen der Linie oberhalb eines Elements bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.

### Beachten Sie:

Netscape 4.x interpretiert diese Angabe nicht. Um die entsprechenden Effekte auch für Netscape anzeigbar zu machen, müssen Sie Einzelangaben wie `border-top-style`, `border-top-width` und `border-color` verwenden.

## Rahmen unten allgemein (border-bottom)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-bottom-width
border-(bottom)-style
border-color

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

    <style type="text/css">
      object.vrml { border-bottom:5mm solid red; }
    </style>

### Erläuterung:

Mit `border-bottom:` können Sie das Aussehen der Linie unterhalb eines Elements bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.

### Beachten Sie:

Netscape 4.x interpretiert diese Angabe nicht. Um die entsprechenden Effekte auch für Netscape anzeigbar zu machen, müssen Sie Einzelangaben wie `border-bottom-style`, `border-bottom-width` und `border-color` verwenden.

## Rahmen links allgemein (border-left)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-left-width
border-(left)-style
border-color

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

    <p style="border-left:thin solid">Text</p>

### Erläuterung:

Mit `border-left:` können Sie das Aussehen der Linie links eines Elements bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.

### Beachten Sie:

Netscape 4.x interpretiert diese Angabe nicht. Um die entsprechenden Effekte auch für Netscape anzeigbar zu machen, müssen Sie Einzelangaben wie `border-left-style`, `border-left-width` und `border-color` verwenden.

## Rahmen rechts allgemein (border-right)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-right-width
border-(right)-style
border-color

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

    <style type="text/css">
      address { border-right:double 2cm #DDFFDD; }
    </style>

### Erläuterung:

Mit `border-right:` können Sie das Aussehen der Linie rechts eines Elements bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.

### Beachten Sie:

Netscape 4.x interpretiert diese Angabe nicht. Um die entsprechenden Effekte auch für Netscape anzeigbar zu machen, müssen Sie Einzelangaben wie `border-right-style`, `border-right-width` und `border-color` verwenden.

## Rahmen allgemein (border)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-width
border-style
border-color

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

    <div style="border:1cm groove #FF00FF;">Text</div>

### Erläuterung:

Mit `border:` können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal.

### Beachten Sie:

Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite, während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie `width:100%` oder `width:500px`.

## Innenabstand oben (padding-top)

Anzeigebeispiel: So sieht's aus

Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und oberer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

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

    <style type="text/css">
      td { padding-top:3mm; }
      th { padding-top:5mm; }
      p.LinieOben { border-top:thin solid red; padding-top:5mm; }
    </style>

### Erläuterung:

Mit `padding-top:` bestimmen Sie den Innenabstand zwischen Elementinhalt und der oberen Elementgrenze. Erlaubt ist eine numerische Angabe.

## Innenabstand unten (padding-bottom)

Anzeigebeispiel: So sieht's aus

Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und unterer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

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

    <p style="border-bottom:thick groove silver; padding-bottom:10px;">Text</p>

### Erläuterung:

Mit `padding-bottom:` bestimmen Sie den Innenabstand zwischen Elementinhalt und der unteren Elementgrenze. Erlaubt ist eine numerische Angabe.

## Innenabstand links (padding-left)

Anzeigebeispiel: So sieht's aus

Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und linker Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

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

    <style type="text/css">
      p.wichtig { border-left:medium double blue; padding-left:12mm; }
    </style>

### Erläuterung:

Mit `padding-left:` bestimmen Sie den Innenabstand zwischen Elementinhalt und der linken Elementgrenze. Erlaubt ist eine numerische Angabe.

## Innenabstand rechts (padding-right)

Anzeigebeispiel: So sieht's aus

Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und rechter Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

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

    <h1 style="border-right-style:solid; border-right-width:3mm; padding-right:9mm;">Text</h1>

### Erläuterung:

Mit `padding-right:` bestimmen Sie den Innenabstand zwischen Elementinhalt und der oberen Elementgrenze. Erlaubt ist eine numerische Angabe.

## Innenabstand allgemein (padding)

Anzeigebeispiel: So sieht's aus

Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den Zwischenraum zwischen Elementinhalt und Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

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

    <style type="text/css">
      body { border: 1.5cm groove #FFDDFF; padding:1cm; }
    </style>

### Erläuterung:

Mit `padding:` bestimmen Sie einen einheitlichen Innenabstand zwischen Elementinhalt und den vier Elementgrenzen oben, links, unten und rechts. Erlaubt ist eine numerische Angabe.

weiter: | Style-Sheet-Angaben: Hintergrundfarben und -bilder
zurück: | Style-Sheet-Angaben: Abstände, Ränder, Ausrichtung

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

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