Ausführbare CSS-Docs: CSS Padding

Q: In welcher Reihenfolge stehen die Werte in der padding-Kurzschreibweise?

Im Uhrzeigersinn ab oben: padding: top right bottom left;. Mit drei Werten heißt das oben, links und rechts, unten; mit zwei Werten oben und unten, dann links und rechts; mit einem Wert alle vier Seiten.

Q: Macht Padding ein Element größer?

Mit dem Standard box-sizing: content-box ja: Padding wird zu width und height addiert. Mit box-sizing: border-box wird das Padding von innen abgezogen, und das Element behält die Größe, die du gesetzt hast.

Q: Wie füge ich in HTML Padding hinzu?

Mit CSS, in einem Stylesheet oder einem style-Attribut: . HTML hat für normale Elemente kein Padding-Attribut; das alte Attribut cellpadding an Tabellen ist veraltet und wird durch padding an td und th ersetzt.

Was Padding ist

Padding ist der Abstand innerhalb eines Elements, zwischen seinem Inhalt und seinem Rahmen. Es übernimmt den Hintergrund des Elements, und genau diese Eigenschaft gibt einem Button, einer Karte oder einem Badge Luft.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

Der blaue Bereich ist der Inhalt. Das grüne Band darum sind die 24px Padding auf jeder Seite, und der Rahmen liegt außerhalb davon.

Die padding-Kurzschreibweise: 1, 2, 3 oder 4 Werte

padding setzt alle vier Seiten in einer Deklaration. Die Anzahl der Werte bestimmt, welche Seite welchen Wert bekommt, im Uhrzeigersinn ab oben:

Deklaration	Oben	Rechts	Unten	Links
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

Zwei Werte bedeuten „vertikal, horizontal“. Drei Werte bedeuten „oben, horizontal, unten“. Vier gehen einmal um die Uhr: oben, rechts, unten, links (eine gängige Eselsbrücke ist das englische TRouBLe).

Tipp unten eine beliebige Kurzschreibweise ein. Die Box wird neu gezeichnet, und der Browser meldet, was jede Seite bekommen hat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Probier 8px, 8px 24px, 0 0 40px und 1em 5%. Ein ungültiger Wert wie -10px wird ignoriert, und die Box behält das letzte gültige Padding.

Eine Seite nach der anderen

Jede Seite hat eine eigene Eigenschaft. Das ist klarer als eine Kurzschreibweise mit vier Werten, wenn du nur eine Seite ändern willst:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Eine Kurzschreibweise, gefolgt von einer einzelnen Seite, ist ein verbreitetes Muster: alles setzen, dann eine Seite anpassen.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Die Reihenfolge ist hier wichtig: Eine padding-Kurzschreibweise nach padding-bottom würde den unteren Wert wieder auf 16px zurücksetzen.

Logisches Padding: padding-inline und padding-block

padding-left und padding-right sind physisch: Sie bleiben in jeder Sprache auf derselben Seite. Die logischen Eigenschaften folgen stattdessen der Schreibrichtung, und genau das willst du auf einer Website, die auch von rechts nach links angezeigt wird:

Logische Eigenschaft	Im Deutschen (links nach rechts)	Im Arabischen (rechts nach links)
`padding-inline-start`	links	rechts
`padding-inline-end`	rechts	links
`padding-inline`	links und rechts	rechts und links
`padding-block`	oben und unten	oben und unten

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Padding macht die Box größer (außer mit border-box)

Standardmäßig ist width nur die Breite des Inhalts, und das Padding kommt obendrauf. Eine Box mit width: 200px und padding: 20px ist 240px breit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box hält die Box bei 200px und nimmt das Padding von innen. Die Seite zum Box-Modell erklärt die ganze Rechnung.

Padding in Prozent

Ein Padding in Prozent wird an der Breite des Elternelements gemessen, auf allen vier Seiten, auch oben und unten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

Daher stammt der alte Trick mit „padding-top: 56.25%“ für Videoboxen im Format 16:9. Heute erledigt aspect-ratio: 16 / 9 das direkt.

Padding an Buttons und Links

Padding ist der richtige Weg, einen Link oder Button größer zu machen, weil Padding zum Element gehört und damit zu dem, was du anklicken oder antippen kannst. Margin würde Abstand schaffen, aber keine größere Zielfläche.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Welche Werte Padding akzeptiert

Wert	Beispiel	Hinweise
Länge	`12px`, `1rem`, `0.5em`	`em` skaliert mit der Schriftgröße des Elements
Prozent	`5%`	Von der Breite des umgebenden Blocks
`0`	`padding: 0`	Keine Einheit nötig
Negativ	`-10px`	Ungültig, wird ignoriert
`auto`	`auto`	Für Padding ungültig (für Margin funktioniert es)

Häufige Fehler

Falsche Reihenfolge in der Kurzschreibweise mit vier Werten. Sie lautet oben, rechts, unten, links, im Uhrzeigersinn.
Eine Box, die wächst, wenn du Padding hinzufügst. Setz box-sizing: border-box.
Padding nutzen, um zwei Elemente zu trennen. Abstand zwischen Elementen ist Margin; Padding ist Abstand innerhalb eines Elements. Siehe Margin vs Padding.
Vertikales Padding an einem Inline-Link, das andere Zeilen überlappt. Mach ihn zu inline-block.
Negatives Padding oder padding: auto. Beides ist ungültig und wird stillschweigend ignoriert.

Häufig gestellte Fragen

Was ist Padding in CSS?

Padding ist der Abstand zwischen dem Inhalt eines Elements und seinem Rahmen. Es gehört zum Element, zeigt also dessen Hintergrundfarbe und vergrößert die klickbare Fläche eines Links oder Buttons.

In welcher Reihenfolge stehen die Werte in der padding-Kurzschreibweise?

Im Uhrzeigersinn ab oben: padding: top right bottom left;. Mit drei Werten heißt das oben, links und rechts, unten; mit zwei Werten oben und unten, dann links und rechts; mit einem Wert alle vier Seiten.

Macht Padding ein Element größer?

Mit dem Standard box-sizing: content-box ja: Padding wird zu width und height addiert. Mit box-sizing: border-box wird das Padding von innen abgezogen, und das Element behält die Größe, die du gesetzt hast.

Worauf bezieht sich ein Padding in Prozent?

Auf die Breite des umgebenden Blocks, für alle vier Seiten. padding-top: 50% ist die Hälfte der Breite des Elternelements, nicht seiner Höhe. Deshalb nutzten alte Tricks für Seitenverhältnisse vertikales Padding.

Kann Padding negativ sein?

Nein. Ein negativer Wert für Padding ist ungültig, und die Deklaration wird ignoriert. Um Inhalt nach außen zu ziehen, nimmst du stattdessen ein negatives Margin.

Wie füge ich in HTML Padding hinzu?

Mit CSS, in einem Stylesheet oder einem style-Attribut: <div style="padding: 16px;">. HTML hat für normale Elemente kein Padding-Attribut; das alte Attribut cellpadding an Tabellen ist veraltet und wird durch padding an td und th ersetzt.

Verwandte Konzepte