Innenabstände (Paddings) sorgen – wie der Name schon sagt – für die nötigen Abstände zwischen dem Inhalt der „Box“ und dem Rahmen / Ende der Box. Diese sollten nicht verwechselt werden mit den Außenabständen (Margins).
Haben wir beispielsweise eine Box mit blauem Hintergrund und wollen darauf weißen Text setzen, so sollten wir mit dem CSS Befehl einen definierten Innenabstand angeben. Dadurch erscheint der Text nicht direkt am „Rand der Box“. Mit einer „Padding“ Anweisung von 20 Pixeln erzeugen wir beispielsweise einen in vielen Fällen gut zu erkennenden Innenabstand zwischen Text und Rahmen. Das Erscheinungsbild des Textes wird über CSS für Schriften definiert. Um die CSS Datei klein zu halten, verwenden wir hier im Idealfall die Mischschreibweise (siehe unten).
| Befehl | Bedeutung | Mögliche Werte |
|---|---|---|
padding-top | Innenabstand oben | Integer Wert in Pixel (px), mm, cm oder em |
padding-right | Innenabstand rechts | Integer Wert in Pixel (px), mm, cm oder em |
padding-bottom | Innenabstand unten | Integer Wert in Pixel (px), mm, cm oder em |
padding-left | Innenabstand links | Integer Wert in Pixel (px), mm, cm oder em |
padding | Innenabstand kombiniert | Integer Wert in Pixel (px), mm, cm oder em padding: 10px;alle Seiten 10pxpadding: 10px 20px;oben/unten 10px, rechts/links 20pxpadding: 10px 20px 30px 40px;oben 10px, rechts 20px, unten 30px, links 40px |
Beispiel
.element {
padding:20px;
padding-top:50px;
padding-bottom:100px;
}