Stil mit {stil}

Nov 2008

Padding – Stile für den Abstand von Inhalten zum umfassenden Element

Das Boxmodell definiert einen inneren Rand, einen Rahmen und einen äußeren Rand um das Element.

Der innere Rand, padding, zeigt die gleiche Hintergrundfarbe wie das Element. margin, der äußere Rand, bildet den Einzug des Elements gegen den umgebenden Block. Dazwischen liegt der Rahmen, border.

margin wird insbesondere in positionierten Boxen eingesetzt, um die Layout-Elemente der Seite auf Abstand voneinander zu halten. padding kommt zum Einsatz, um die Inhalte einer Box vom Rahmen der Box fern zu halten. Der Rahmen, border, ist i.d.R. dekorativer Natur und trennt die Boxen optisch.

Die Breite von padding und border zählt mit zur Breite eines Elements. margin bleibt bei der Berechnung der Breite eines Elements im wahrsten Sinne außen vor und wird nicht mitberechnet.

Fünf Eigenschaften sind insgesamt für den inneren Rand - padding - spezifiziert, dabei ist padding eine Kurznotation, mit der alle anderen Eigenschaften beschrieben werden können:

• [ padding ]
• padding-top padding-right padding-bottom padding-left

padding

IE4+ M1 N4+ O5+ Sa1 CSS1 Erblich: Nein

padding

padding ist eine Kurzschrift für die zuvor aufgeführten Eigenschaften und schreibt alle vier Eigenschaften in einer Deklaration.

Werte

[ length | percentage ] {1,4}

{1,4}: Sie können eine, zwei, drei oder vier Breiten angeben:

• Wenn Sie eine Breite angeben, werden alle vier Ränder in dieser Breite dargestellt.
• Wenn Sie zwei Breiten angeben, wird der obere und untere Rand mit der ersten Angabe und der rechte und linke Rand mit der zweiten Breite dargestellt.
• Wenn Sie drei Breiten angeben, wird der obere Rand mit der ersten, der rechte und linke Rand mit der zweiten und der untere Rand mit der dritten Breite dargestellt.
• Wenn Sie vier Breiten angeben, ist die Reihenfolge top, right, bottom, left.

length

length kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

percentage

percentage (Prozentsatz) basiert auf der vollen Elementhöhe, die als 100% definiert ist.

Beispiel: padding und Hintergrundfarbe

<img style="background:black; border:10px solid silver; padding: 10px 10px 20px 10px;" … />

zurück zum Seitenanfang