Padding – Stile für den inneren Rand

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. 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-top • padding-right • padding-bottom • padding-left • padding

padding-top | padding-right | padding-bottom | padding-left

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein	padding-top gibt den Abstand (Rand) zwischen dem Element und dem oberen Rahmen (border-top) an.	length \| percentage
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein	padding-right gibt den Abstand (Rand) zwischen dem Element und dem rechten Rahmen (border-right) an.	length \| percentage
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein	padding-bottom gibt den Abstand (Rand) zwischen dem Element und dem unteren Rahmen (border-bottom) an.	length \| percentage
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein	padding-left gibt den Abstand (Rand) zwischen dem Element und dem linken Rahmen (border-left) an.	length \| percentage

length kann in einer der folgenden Maßeinheiten angegeben werden (Voreinstellung ist 0):

Maßeinheit	Abkürzung	Maßeinheit	Abkürzung
Zentimeter	cm	Millimeter	mm
ems	em	Pica	pc
x-Höhe	ex	Pixel	px
Inch	in	Point	pt

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

Beispiel

h1 {   padding-top: 10px; 
       padding-bottom: 10px; 
       padding-left: 4px}
div {  padding-top: 15px; 
       padding-right: 20px; 
       padding-bottom: 30px; 
       padding-left: 20px}

↑

padding

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

padding fasst alle individuellen Stylesheet-Eigenschaften des Randes zusammen: padding-bottom, padding-left, padding-right und padding-top.

[ length | percentage ]{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 kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit	Abkürzung	Maßeinheit	Abkürzung
Zentimeter	cm	Millimeter	mm
ems	em	Pica	pc
x-Höhe	ex	Pixel	px
Inch	in	Point	pt

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

Beispiel

h1 {  padding: 10px 4px }
p {  padding: 3em 30px 5em; }

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger