CSS 2.1: `padding-[top|right|bottom|left]`

Erläuterungen

Die Eigenschaften padding-top, padding-right, padding-bottom und padding-left sind Teil der Kurzschrift- Eigenschaft padding. Mit ihnen lassen sich die Breiten der vier zwischen dem Rahmen und dem Inhalt eines Elements liegenden Abstände (Innenabstände) einzeln festlegen.

Alle vier Eigenschaften können auf alle Elemente angewendet werden. Für nicht-replazierte Inline- Level- Elemente wie z. B. Hyperlinks gibt es einige Besonderheiten:

Wendet man padding-top und padding-bottom auf nicht-replazierte Inline- Level- Elemente an, ergeben sich möglicherweise bei einigen Anwenderprogrammen Überlappungen mit den darüber- oder darunterliegenden Zeilen. Hier lässt sich jedoch mit einem entsprechenden Wert für line-height ein Ausgleich schaffen.
padding-left und padding-right werden, wenn sie sich über mehrere Textzeilen erstrecken, nur links in der ersten Zeile und rechts in der letzten Zeile dargestellt.

Die Hintergrundgestaltung der padding-Fläche ist von den verschiedenen background-Eigenschaften abhängig.

Tipp:

Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'padding-top', 'padding-right', 'padding-bottom', 'padding-left' <padding-width> | inherit

Der Werttyp <padding-width> kann die Werte <length> oder <percentage> annehmen.

<length>: Eine absolute oder relative Längenangabe. Im Unterschied zu den margin-Eigenschaften dürfen die Werte hier nicht negativ sein.; Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
<percentage>: Angabe relativ zur Breite (width) des umschließenden Blocks. Prozent- und Längenangaben können gemischt werden. Wenn die Breite des umschließenden Blocks von der Breite dieses Elements einschl. padding abhängig ist (z. B. wenn es float-positioniert ist), dann ist das resultierende Layout in sich widersprüchlich. Es wird deshalb in CSS 2.1 als 'nicht definiert' bezeichnet.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

P { padding-left: 5px; }

Browserunterstützung

: Die Eigenschaften padding-top, padding-right, padding-bottom und padding-left werden von allen modernen Browsern korrekt dargestellt.

Eric Meyer's CSS2 Test Suite: padding-top, padding-right, padding-bottom, padding-left.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

padding

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Einige Mobilgeräte verkleinern Abstände im Stylesheet, um die Darstellung an Kleindisplays zu 'optimieren'. Innerhalb von Text werden sie oft ganz unterdrückt. Größere Abstände an Block- Level- Elementen sind in der Darstellung vielfach bis auf wenige Pixel verringert. Deshalb sollte man für padding keine absoluten Werte, sondern Prozentwerte oder als relative Größen angeben. Dadurch sind sie automatisch an die unterschiedlichen Ausmaße der Displays angepasst.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`0`	Spezifizierter `%`-Wert oder absolute Länge	Nein	Auf alle Elemente, in Tabellen nur `inline-table`, `table`, `th`, `td`	Breite des umschließenden Blockelements	Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

TOP

Notizen: