Zum Inhalt springen

padding

  • Redaktion 
  • Zuletzt aktualisiert am

#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.

Die CSS-Eigenschaft padding wird verwendet, um Platz um den Inhalt eines Elements zu schaffen. Padding ist der Raum zwischen dem Inhalt eines Elements und seinem Rand. Sie ähnelt dem Konzept der Ränder, die den Raum außerhalb eines Elements vergrößern. Die Eigenschaft padding kann verwendet werden, um allen vier Seiten eines Elements Platz zu geben, oder du kannst die Auffüllung für jede Seite einzeln mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left festlegen.