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.
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.
Browserunterstützung
Die Eigenschaft padding
wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:
- Internet Explorer
- Bis zur Version 7 versteht der IE den Wert
inherit
nicht.