padding
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Die zusammenfassende Eigenschaft padding beschreibt die Größe des Innenrands eines Elements.
Der Innenrand ist ein Bereich, der sich zwischen dem Inhalt eines Elements und dem Rahmen befindet. Jede Hintergrundfarbe bzw. jedes Hintergrundbild eines Elements füllt auch den Bereich des Innenrands aus.
Die Größe des Innenrands kann auch für jede Seite einzeln mit den Eigenschaften padding-bottom, padding-left, padding-right und padding-top deklariert werden.
Vererbt: nein
Siehe auch: padding-bottom, padding-left, padding-right, padding-top
Werte
Ein bis vier unterschiedliche Werte (siehe folgende Tabelle), getrennt durch ein Leerzeichen.
Jeder Wert kann als CSS-Maßangabe oder als Prozentwert der Breite bzw. Höhe des übergeordneten Elements angegeben werden.
Tabelle: Wertkombinationen für padding und ihre Auswirkung.
| Anzahl der Werte | Auswirkung |
|---|---|
| 1 | Der Wert bezieht sich auf alle vier Innenränder. |
| 2 | Der erste Wert bezieht sich auf die horizontalen Innenränder oben und unten, der zweite Wert auf die vertikalen Innenränder links und rechts. |
| 3 | Der erste Wert bezieht sich auf den oberen Innenrand, der zweite Wert auf die vertikalen Innenränder links und rechts, der dritte Wert auf den unteren Innenrand. |
| 4 | Der erste Wert bezieht sich auf den oberen Innenrand, der zweite Wert auf den rechten Innenrand, der dritte Wert auf den unteren Innenrand, der vierte Wert auf den linken Innenrand. |
Standardwert: 0
Kompatibilität
CSS-Version: 1
Funktioniert in allen CSS-fähigen Browsern, einschließlich Internet Explorer 4 und Netscape 4.
Für Elemente mit einem Rahmen zeigt Netscape 4 eine Lücke von drei Pixel Breite zwischen Rahmen und Innenrand an. Diese Lücke kann nicht entfernt werden und ist transparent, auch wenn dem Element ein Hintergrund zugewiesen wird. Mit den proprietären Netscape-Eigenschaften layer-background-color und layer-background-image kann diese Lücke mit der Hintergrundfarbe bzw. dem Hintergrundbild separat ausgefüllt werden.
Beispiele
Folgende Stilregel erzeugt einen dünnen Rahmen und einen roten Hintergrund um die Elemente der Klasse warnung. Um in dem Element etwas Weißraum zu schaffen, wird oben und unten ebenfalls ein Innenrand von 5 Pixel sowie links und rechts ein Innenrand von 10 Pixel Breite angelegt:
.warnung {
border: 1px solid;
background-color: red;
padding: 5px 10px;
}Folgende Stilregel erzeugt einen Innenrand von 3 Pixel Breite in allen Zellen einer Tabelle der Klasse luftig. Sie ist somit die CSS-Entsprechung zum HTML-Attribut cellpadding.
table.luftig td, table.luftig th {
padding: 3px;
}| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg