CSS Padding-Eigenschaft

Die CSS-Eigenschaft padding erzeugt Platz innerhalb eines Elements, zwischen seinem Inhalt und seinem Rahmen. Anders als margin — das Platz außerhalb des Rahmens schafft, zwischen benachbarten Elementen — ist Padding Teil des Elements selbst: Es teilt den Hintergrund des Elements und wird in den Klick-/Hover-Bereich einbezogen.

Diese Seite behandelt die vier einzelnen Padding-Eigenschaften, die padding-Kurzschreibweise mit allen ihren Werteformen (ein bis vier Werte), die verwendbaren Einheiten und Prozentwerte sowie die Stolperfallen (Prozentwerte, box-sizing und warum Padding nie zusammenbricht wie Margins).

Die einzelnen Seiten

Mit den folgenden Eigenschaften kann das Padding für jede Seite eines Elements gesetzt werden:

Wie zu erwarten, wird für oben padding-top, für unten padding-bottom, für links padding-left und für rechts padding-right verwendet.

Alle Padding-Eigenschaften akzeptieren die folgenden Werte:

length — eine feste Größe in px, em, rem, pt, cm usw. (zum Beispiel padding-top: 16px).
Prozentwert (%) — ein Padding relativ zur Breite des umgebenden Blocks. Achtung: Ein vertikaler Prozentwert für Padding (oben/unten) wird ebenfalls aus der Breite des Containers berechnet, nicht aus seiner Höhe. Das ist es, was den klassischen „padding-bottom percentage"-Trick für Seitenverhältnis-Boxen ermöglicht.
inherit — übernimmt den berechneten Padding-Wert des Elternelements.

Ein paar Regeln, die es wert sind, behalten zu werden:

Padding kann nicht negativ sein. Wenn Inhalt in die andere Richtung gezogen werden soll, ist margin oder transform die richtige Wahl.
Der Standardwert jeder Padding-Eigenschaft ist 0.
Padding bricht nicht zusammen. Benachbarte vertikale Margins können zu einem verschmelzen (Margin Collapsing), aber zwei Paddings addieren sich immer — gestapelte Elemente behalten also beide Paddings.
Standardmäßig wird Padding zusätzlich zur deklarierten width/height hinzugerechnet. Eine 200px breite Box mit padding: 20px wird 240px breit gerendert. Setze box-sizing: border-box, damit das Padding innerhalb der deklarierten Breite bleibt.

Beispiel der einzelnen Padding-Eigenschaften:

Beispiel für die Verwendung einzelner Padding-Eigenschaften:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: yellow;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-left: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Individual padding properties</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
    </div>
  </body>
</html>

Probier es selbst »

Padding als Kurzschreibweise

Die CSS-Eigenschaft padding ist eine Kurzschreibweise für die vier einzelnen Eigenschaften:

Die Anzahl der übergebenen Werte bestimmt, wie sie auf die vier Seiten abgebildet werden:

Werte	`padding: …`	Oben	Rechts	Unten	Links
1	`35px`	35px	35px	35px	35px
2	`20px 40px`	20px	40px	20px	40px
3	`20px 15px 35px`	20px	15px	35px	15px
4	`25px 50px 75px 100px`	25px	50px	75px	100px

Die Reihenfolge bei vier Werten ist im Uhrzeigersinn von oben: oben, rechts, unten, links. Bei zwei oder drei Werten spiegeln die fehlenden Seiten die gegenüberliegende Seite.

Wenn die Padding-Eigenschaft nur 1 Wert hat, zum Beispiel padding: 35px, sind alle vier Paddings 35px.

Beispiel der Padding-Kurzschreibweise mit einem Wert:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: green;
        padding: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Padding shorthand with one value</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Probier es selbst »

Die Padding-Eigenschaft kann 2 Werte haben, zum Beispiel padding: 20px 40px, wobei das obere und untere Padding 20px und das rechte und linke Padding 40px betragen.

CSS-Padding mit 2 Werten — Beispiel

p {
  padding: 20px 40px;
}

Das ist dasselbe wie der folgende Code.

CSS-Padding mit 2 Werten — ausführliche Schreibweise

p {
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
}

Beispiel der Padding-Kurzschreibweise mit zwei Werten:

CSS-Padding-Beispielcode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Die Padding-Eigenschaft kann 3 Werte haben, zum Beispiel padding: 20px 15px 35px;, wobei das obere Padding 20px, das rechte und linke Padding 15px und das untere Padding 35px beträgt.

CSS-Padding mit 3 Werten — Beispielcode

p {
  padding: 20px 15px 35px;
}

Das ist dasselbe wie der folgende Code.

CSS-Padding mit 3 Werten — ausführliche Schreibweise

p {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 35px;
  padding-left: 15px;
}

Beispiel der Padding-Kurzschreibweise mit drei Werten:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        padding: 20px 15px 35px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Probier es selbst »

Und schließlich kann die Padding-Eigenschaft vier Werte haben, zum Beispiel padding: 25px 50px 75px 100px;, wobei das obere Padding 25px, das rechte Padding 50px, das untere Padding 75px und das linke Padding 100px beträgt.

CSS-Padding — gleiches Beispiel

p {
  padding: 25px 50px 75px 100px;
}

Beispiel der Padding-Kurzschreibweise mit vier Werten:

Beispiel der Padding-Kurzschreibweise mit vier Werten (oben, rechts, unten, links — im Uhrzeigersinn):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #95e5f7;
        padding: 25px 50px 75px 100px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Probier es selbst »

Padding vs. Margin

Padding und margin werden leicht verwechselt. Verwende Padding, wenn du Luft innerhalb einer Box brauchst — zwischen Text und seinem Rahmen oder Hintergrund. Verwende margin, wenn du Abstand zwischen einer Box und den umgebenden Elementen brauchst.

Wichtige praktische Unterschiede:

Padding teilt die Hintergrundfarbe des Elements; Margin ist immer transparent.
Padding ist Teil des klickbaren Bereichs des Elements (praktisch für Buttons und Links); Margin hingegen nicht.
Margins können zwischen Geschwisterelementen zusammenbrechen (Margin Collapsing); Paddings niemals.

Übungen

Übung

Was beschreibt die Eigenschaft 'padding' in CSS korrekt?

Die Padding-Eigenschaft erzeugt zusätzlichen Platz nur innerhalb des Elements.Die Padding-Eigenschaft fügt zusätzlichen Platz um den Inhalt des Elements herum hinzu, außerhalb aller definierten Rahmen.Padding ist eine Kurzschreibweise zum Setzen der Eigenschaften padding-top, padding-right, padding-bottom und padding-left in einer einzigen Deklaration.Die Padding-Eigenschaft ändert die Hintergrundfarbe eines Elements.Die Padding-Eigenschaft weist dem Element eine Textur zu.

Die einzelnen Seiten

Beispiel der einzelnen Padding-Eigenschaften:

Padding als Kurzschreibweise

Beispiel der Padding-Kurzschreibweise mit einem Wert:

Beispiel der Padding-Kurzschreibweise mit zwei Werten:

Ergebnis

Beispiel der Padding-Kurzschreibweise mit drei Werten:

Beispiel der Padding-Kurzschreibweise mit vier Werten:

Padding vs. Margin

Verwandte Themen

Übungen