Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

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:

Inhaltsbereich

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;
}