#padding

default padding: 0;

Entfernt alle Auffüllungen.

padding: 30px;

Wenn der Wert 1 verwendet wird, wird die Auffüllung für alle 4 Seiten eingestellt.

padding: 30px 60px;

Bei Verwendung von 2 Werten:

  • der erste Wert ist für oben/unten
  • der zweite Wert steht für rechts/links

Um sich die Reihenfolge zu merken, denke an die Werte, die du nicht definiert hast.

Wenn du 2 Werte eingibst (oben/rechts), verbietest du die Einstellung unten und links. Da bottom das vertikale Gegenstück zu top ist, wird der Wert von top verwendet. Und weil left das horizontale Gegenstück zu right ist, wird der Wert von right verwendet.

padding: 30px 60px 45px;

Bei Verwendung von 3 Werten:

  • der erste Wert ist für oben
  • der zweite Wert steht für rechts/links
  • der dritte Wert steht für unten

Um sich die Reihenfolge zu merken, denke an die Werte, die du nicht definiert hast.

Wenn du 3 Werte eingibst (oben/rechts/unten), lässt du die Einstellung links weg. Als Gegenstück zu right wird dessen Wert verwendet.

padding: 30px 60px 45px 85px;

Bei Verwendung von 4 Werten:

  • der erste Wert ist für oben
  • der zweite Wert steht für rechts
  • der dritte Wert steht für unten
  • der vierte Wert steht für links

Um sich die Reihenfolge zu merken, fange bei oben an und gehe im Uhrzeigersinn.