CSS-Eigenschaft padding

Die Eigenschaft padding erzeugt Padding Space auf allen Seiten des Inhalts eines Elements.

Padding-Werte werden über Längen oder Prozentsätze eingestellt.

Negative Werte sind nicht gültig.

Die CSS-Eigenschaft padding ist die Abkürzung für folgende Eigenschaften:

Wir können die Eigenschaft padding für alle Seiten (oben, unten, links, rechts) verwenden.

Die Eigenschaft padding kann mit einem, zwei, drei oder vier Werten angegeben werden:

Wenn vier Werte angegeben werden, stellt der erste Wert die Oberseite, der zweite die rechte Seite, der dritte Wert die Unterseite und der vierte Wert die linke Seite ein.
Wenn drei Werte angegeben werden, stellt der erste die Oberseite, der zweite die rechte und linke Seite und der dritte Wert die Unterseite des Elements ein.
Wenn zwei Werte angegeben werden, stellt der erste Wert die Ober- und Unterseite und der zweite die rechte und linke Seite ein.
Wenn padding nur einen Wert hat, wird es auf alle vier Werte angewendet.

Anfangswert	0
Gilt für	Alle Elemente, außer wenn die Eigenschaft display auf table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column eingestellt ist. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja, Polsterbereich ist animierbar.
Version	CSS1
DOM Syntax	object.style.padding = "30px";

Syntax

padding: length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft padding</h2>
    <p>Ein Absatz mit den Eigenschaften background-color, color und padding.</p>
  </body>
</html>

Versuch es selber!

Im angegebenen Beispiel bedeutet dieser Code, dass die Polsterung in der Oberseite 20px, in der rechten Seite 40px, in der Unterseite 20px und in der linken Seite 40px sein muss.

Ein weiteres Beispiel, bei dem die Eigenschaft paddingin Prozent angegeben wird:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 5% 10% 10% 5%;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft padding</h2>
    <p>Ein Absatz mit den Eigenschaften background-color, color und padding.</p>
  </body>
</html>

Versuch es selber!

Ein Beispiel, wo zwei Werte angegeben werden. Der erste Wert stellt die Ober- und Unterseite und der zweite Wert die rechte und linke Seite ein:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft padding</h2>
    <p>Ein Absatz mit den Eigenschaften background-color, color und padding.</p>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
length	Definiert ein Padding in px, pt, cm usw. Der Standardwert ist 0.
%	Stellt das Padding in % des enthaltenen Elements.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.