http://jendryschik.de

Usability und Webstandards

Suche
SucheMenü

Polsterung

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

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.

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.