Polsterung: Die Eigenschaft padding

Die zusammenfassende Eigenschaft padding gibt die Breite der Paddingbox eines Elements an. Die Eigenschaften padding-top, padding-right, padding-bottom und padding-left setzen die Breite entsprechend nur für eine Seite der Paddingbox.

Werte	<Länge>, <Prozent>, inherit
Initialwert	0
Vererbung	nein
Anwendung	global

Die Angabe in Prozent wird relativ zur Breite des umschließenden Blocks der erzeugenden Box berechnet, auch für padding-top und padding-bottom.

Kurzschreibweisen

Wird für padding nur ein Wert angegeben, bezieht er sich – wie in Tabelle 7.3 zu sehen – auf alle vier Seiten. Werden zwei Werte angegeben, bezieht sich der erste auf oben und unten und der zweite auf rechts und links. Werden drei Werte angegeben, bezieht sich der erste auf oben, der zweite auf rechts und links und der dritte auf unten. Werden vier Werte angegeben, bezieht sich der erste auf oben, der zweite auf rechts, der dritte auf unten und der vierte auf links.

Tabelle 7.3: Die Eigenschaft padding fasst die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zusammen

Deklaration	Polsterung
	oben	rechts	unten	links
padding: 1em;	1 em	1 em	1 em	1 em
padding: 1em 2em;	1 em	2 em	1 em	2 em
padding: 1em 2m 3em;	1 em	2 em	3 em	2 em
padding: 1em 2em 3em 4em;	1 em	2 em	3 em	4 em

Korrektur der Zeilenhöhe

Wenn Sie padding-top und padding-bottom auf Inline-Elemente anwenden, werden Sie in einigen Browsern möglicherweise Überlappungen mit darüber- und/oder darunterliegenden Zeilen feststellen. Dieses Verhalten können Sie korrigieren, indem Sie die Zeilenhöhe mit der Eigenschaft line-height entsprechend anpassen.