Weitere Infos
Sie lesen:
LB1 (2009)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
8.5 Effektiv: Kurzschreibweisen für padding und margin
Im Folgenden noch ein paar Hinweise zur effektiveren Schreibweise von Deklarationen für padding und margin.
Alle vier Seiten gleich
Die beiden folgenden CSS-Regeln bewirken dasselbe:
Ausführliche Schreibweise | Kurzschreibweise |
---|---|
#kopfbereich { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } |
#kopfbereich { padding: 20px; } |
Die Reihenfolge entscheidet: nur eine Seite anders
Das folgende Beispiel gibt rundherum ein padding von 20px, nur unten soll das Element keines haben. Dabei machen Sie sich die Tatsache zunutze, dass bei mehreren gleichwertigen Definitionen die jeweils zuletzt notierte gilt:
Ausführliche Schreibweise | Kurzschreibweise |
---|---|
#kopfbereich { padding-top: 20px; padding-right: 20px; padding-bottom: 0; padding-left: 20px; } |
#kopfbereich { padding: 20px; padding-bottom: 0; } |
Bei der Kurzschreibweise wird in der ersten Zeile ein padding von 20 Pixel definiert, und in der Zeile direkt darunter wird das padding-bottom auf 0 gesetzt. Bei sich widersprechenden Anweisungen gilt die zuletzt definierte.
Beachten Sie, dass der Kopfbereich im folgenden Beispiel ein padding-bottom von 20 Pixel haben wird, obwohl padding-bottom explizit auf 0 gesetzt wurde.
Der Grund liegt darin, dass padding-bottom aus Zeile 2 in Zeile 3 gleich wieder überschrieben wird:
#kopfbereich {
padding-bottom: 0; /* wird in der folgenden Zeile überschrieben */
padding: 20px;
}
Unterschiedliche Werte für alle vier Seiten
Im folgenden Beispiel deklarieren Sie für die vier Seiten eines Elements zum Teil unterschiedliche Werte:
Ausführliche Schreibweise | Kurzschreibweise |
---|---|
#kopfbereich { padding-top: 10px; padding-right: 20px; padding-bottom: 0; padding-left: 20px; } |
#kopfbereich { padding: 10px 20px 0 20px; } |
Vorteil der ausführlichen Schreibweise ist, dass sie sehr leicht verständlich ist. Die Kurzschreibweise hingegen ist weniger Tipparbeit.
Die Reihenfolge der vier Angaben ist einfach zu merken, denn es geht immer oben los und dann im Uhrzeigersinn weiter:
- top (oben) – right (rechts) – bottom (unten) – left (links)
Paarweise: oben = unten und links = rechts
Noch kürzer können Sie eine Deklaration schreiben, wenn für rechts und links sowie oben und unten gleiche Werte stehen:
Ausführliche Schreibweise | Kurzschreibweise |
---|---|
#wrapper { margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; } |
#wrapper { margin: 10px auto; } |