CSS padding - Innenabstand der Elemente festlegen

In CSS können Elementen Innenabstände zugewiesen werden. Diese sorgen innerhalb des Box-Modells für einen gewissen Platz zwischen dem Inhaltsbereich und dem Rahmen und vergrößern standardmäßig die Box.

Außer einigen Tabellenelementen (table-row-group, table-column-group, table-header-group, table-footer-group, table-row, table-column) kann die Eigenschaft padding fast allen Elementen zugewiesen werden. Dabei kann man für alle vier Seiten unterschiedliche Werte angeben. Hierfür werden die folgenden Eigenschaften verwendet.

padding-top (oben)
padding-right (rechts)
padding-bottom (unten)
padding-left (links)

Nachfolgend ist die Syntax in der Langform anhand eines Beispiels abgebildet.

Kurzschreibweise für padding (Shorthand)

Die Eigenschaft padding gehört zu den Shorthand-Eigenschaften und man kann die Kurzschreibweise verwenden, statt die Werte für oben, rechts, unten und links einzeln anzugeben. Dabei beginnt man mit dem oberen Wert und jeweils mit einem Leerzeichen getrennt folgen im Uhrzeigersinn die anderen Werte. Auf der folgenden Abbildung ist ein Beispiel-Code.

Angabe von drei Werten

Falls der Wert für die linke und rechte Seite identisch ist, kann man die Angabe auch mit nur drei Werten vornehmen. In dem Fall gelten die angegebenen Werte wie folgt.

1. Wert: oben
2. Wert: rechts und links
3. Wert: unten

Ein Beispielcode.

.selektor {
padding: 5px 10px 20px;
}

Angabe von zwei Werten

Ist der Wert einerseits für links und rechts und andererseits für oben und unten identisch, reicht die Angabe von zwei Werten. In dem Fall gelten die angegebenen Werte wie folgt.

1. Wert: oben und unten
2. Wert: links und rechts

Ein Beispielcode.

.selektor {
padding: 10px 20px;
}

Angabe von nur einem Wert

Soll der Innenabstand für alle Seiten identisch sein, reicht die Angabe eines Werts. Ein Beispielcode.

.selektor {
padding: 10px;
}

Werte für padding

Die Werte können nicht nur mit der Einheit px angegeben werden. Die folgenden Werte sind möglich.

Numerische Angaben mit Einheit

<Zahl>px (Pixel)
<Zahl>% (Prozent, bezieht sich auf die Breite des Elternelements)
<Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
<Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
<Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
<Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
<Zahl>vw (1vw entspricht 1% der Anzeigebreite)
<Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
<Zahl>vmin (der kleinere Wert von vw oder vh)
<Zahl>vmax (der größere Wert von vw oder vh)
<Zahl>pt (Punkt)
<Zahl>pc (Pica)
<Zahl>in (Inch)
<Zahl>mm (Millimeter)
<Zahl>cm (Zentimeter)

Keyword-Werte

initial (Setzt auf den Standardwert)
inherit (Vererbt vom Elternelement)
unset (Setzt auf den Wert, der über inherit vererbt worden ist und auf initial, falls nichts vererbt wurde)

Enthält die Box ein Hintergrundbild, wird das Bild standardmäßig auch im Bereich von padding angezeigt. Bei der Angabe der Größe der Box muss der Innenabstand nach dem Standard Box-Modell hinzu addiert werden. Wenn man davon abweichen möchte, kann man das Box-Modell über box-sizing umstellen. In dem Fall gelten evtl. Größenangaben inklusive den Innenabständen und den Rahmenbreiten.