Innenabstand#

Padding#

Die CSS Eigenschaft padding legt den Innenabstand fest. Innenabstand (padding) ist ein erzwungener Leerraum zwischen dem Inhalt eines Elements und Rahmen.

Über die Eigenschaften padding-top, padding-right, padding-bottom und padding-left können alle vier Seiten einer Box einzeln angesprochen werden.

Eigenschaftswert

Erklärung

padding

Innenabstand wird für alle vier Bereiche des Elementes - oben (top), rechts (right), unten (bottom) und links (left) - in Pixel angegeben.

  • Wird ein Wert angegeben, gilt das padding für alle 4 Seiten.

  • Werden zwei Werte angegeben, gilt der erste Wert für top und bottom, der zweite für left und right.

  • Werden drei Werte angegeben, gilt der erste Wert für top, der zweite Wert für left und right und der dritte Wert für bottom.

  • Alle viert Werte stehen für top. right, bottom und left

padding-top

Der Wert wirkt sich nur auf den Innenabstand oben aus.

padding-right

Der Wert wirkt sich nur auf den Innenabstand rechts aus.

padding-bottom

Der Wert wirkt sich nur auf den Innenabstand unten aus.

padding-left

Der Wert wirkt sich nur auf den Innenabstand links aus.

 
h1 {
  background-color: crimson;
  padding: 16px;
}

div {
  background-color: rebeccapurple;
  padding: 12px 6px 22px 6px;
}

h2 {
  background-color: crimson;
  padding-top: 16px;
  padding-right: 32px;
  padding-bottom: 12px;
  padding-left: 22px;
}

See the Pen padding1 by csswebsite (@csswebsite) on CodePen.

See the Pen padding2 by csswebsite (@csswebsite) on CodePen.