CSS padding – Referenz, Beispiel und Labor

stylesheet.css · padding

.probe {
  padding: 16px;
}

Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.

berechneter Wertpadding: 16px

Box-Breite–

Box-Höhe–

Erläuterungen

Diese Eigenschaft ist eine Kurzschrift-Eigenschaft, mit der sich die Breite der vier zwischen dem Rahmen und dem Inhalt eines Elements liegenden Abstände (Innenabstände) festlegen lässt. Es ist möglich, einen, zwei, drei oder vier Werte anzugeben, die durch Leerzeichen voneinander getrennt werden.

Ein Wert:
Gilt für die Abstände auf allen vier Seiten.

Zwei Werte:
Der erste Wert gilt für die Abstände oben und unten, der zweite Wert für die Abstände rechts und links.

Drei Werte:
Der erste Wert gilt für den Abstand oben, der zweite Wert für die Abstände rechts und links, der dritte Wert für den Abstand unten.

Vier Werte:
Die Werte stehen in der Reihenfolge oben - rechts - unten - links.

Die Eigenschaft faßt die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zusammen.

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

Erlaubte Werte

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

'padding'
<padding-width>{1,4} | inherit

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

<length>: Eine absolute oder relative Längenangabe. Im Unterschied zur Eigenschaft margin 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 Elements. Prozent- und Längenangaben können gemischt werden.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

P { padding: 5px;               /* alle 4 Seiten */ }
P { padding: 1px 0;             /* oben-unten, rechts-links */ }
P { padding: 0.5em 0 0.7em;     /* oben, rechts-links, unten */ }
P { padding: 2px 5px 5px 2px;   /* 4 Seiten einzeln */ }

Browserunterstützung

: Die Eigenschaft padding wird von allen modernen Browsern korrekt dargestellt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

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-[top|right|bottom|left]

Prozentwerte messen die Breite

Ein Prozentwert bezieht sich auf die Breite des umschließenden Blocks, und zwar auch oben und unten. Ein oberer Innenabstand von 10 % ist also ein Zehntel der Breite, nicht der Höhe.

Das wirkt zunächst wie eine Merkwürdigkeit und hat einen praktischen Grund: Die Höhe eines Blocks ergibt sich meist aus seinem Inhalt. Ein Innenabstand, der sich auf die Höhe bezöge, würde die Höhe verändern und damit seinen eigenen Bezugswert. Die Breite dagegen steht fest, bevor der Inhalt gesetzt wird.

Aus derselben Regel entstand eine lange gebräuchliche Technik: Ein Element ohne Inhalt mit einem oberen Innenabstand in Prozent behält ein festes Seitenverhältnis, weil seine Höhe an seiner Breite hängt. Dafür gibt es inzwischen eine eigene Eigenschaft, doch die Technik erklärt, warum diese Regel so oft zur Sprache kommt.

Keine negativen Werte

Im Unterschied zu den Außenabständen sind negative Innenabstände nicht erlaubt. Der Grund liegt in der Bedeutung: Ein Außenabstand beschreibt einen Zwischenraum, der sich auch aufheben lassen darf; ein Innenabstand beschreibt den Abstand zwischen Rahmen und Inhalt, und ein negativer Wert würde den Inhalt über den Rahmen hinausschieben.

Ebenso wenig fallen Innenabstände zusammen. Zwischen zwei benachbarten Elementen summieren sich ihre Innenabstände immer, während sich ihre Außenabstände unter bestimmten Bedingungen überlagern. Wer einen verlässlichen Abstand braucht, ist mit dem Innenabstand deshalb besser bedient.

Der Innenabstand gehört zur sichtbaren Fläche: Hintergrundfarbe und Hintergrundbild reichen bis an den Rahmen und damit über den Innenabstand hinweg. Das ist der zweite große Unterschied zum Außenabstand, dessen Fläche immer durchsichtig bleibt.

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.

Ausgangswert: Siehe bei den individuellen Eigenschaften
Berechneter Wert: Siehe bei den individuellen Eigenschaften
Vererbung: Nein
Anwendbarkeit: Auf alle Elemente, in Tabellen nur inline-table, table, th, td
%-Bezugswert: Breite des umschließenden Blockelements
Mediengruppe(n): Visual

Verwendete Standards

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

CSS-Eigenschaft padding