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.
    padding: 10px

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

  • 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.
    padding: 10px 12px 8px

  • Alle vier Werte stehen für top, right, bottom und left.
    padding: 10px 8px 10px 8px

padding-top

Der Wert wirkt sich nur auf den Innenabstand oben aus.
padding-top: 10px

padding-right

Der Wert wirkt sich nur auf den Innenabstand rechts aus.
padding-right: 10px

padding-bottom

Der Wert wirkt sich nur auf den Innenabstand unten aus.
padding-bottom: 10px

padding-left

Der Wert wirkt sich nur auf den Innenabstand links aus.
padding-left: 10px

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

Das ist der Innenabstand

 
div {
  background-color: rebeccapurple;
  padding: 40px 6px 22px 30px;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
h2 {
  background-color: crimson;
  padding-top: 16px;
  padding-right: 32px;
  padding-bottom: 12px;
  padding-left: 22px;
}

Innenabstand