padding

Zuletzt aktualisiert am 15. Februar 2026

padding steuert den Innenabstand eines Elements, also den Freiraum zwischen dem Inhalt und dem Rahmen (Border). Anders als Margin wird Padding von der Hintergrundfarbe ausgefüllt und erlaubt keine negativen Werte. Mit der Shorthand-Eigenschaft padding setzt du alle vier Seiten auf einmal. Für einzelne Seiten gibt es padding-top, padding-right, padding-bottom und padding-left.

Grundlagen

Padding schafft Platz innerhalb der Box. Ohne Padding klebt der Text direkt am Rand oder am Border, was schlecht lesbar aussieht. Padding gehört zu den am häufigsten verwendeten CSS-Eigenschaften, weil fast jedes Element etwas Luft zum Atmen braucht.

Wichtig: Wie sich Padding auf die Gesamtgröße eines Elements auswirkt, hängt von box-sizing ab. Mit dem Standard content-box kommt Padding obendrauf. Mit border-box wird Padding nach innen gerechnet.

Syntax & Werte

Im Gegensatz zu margin gibt es bei padding keinen auto-Wert und keine negativen Werte.

Shorthand-Notation

Die Shorthand-Eigenschaft akzeptiert 1 bis 4 Werte im Uhrzeigersinn (oben, rechts, unten, links):

/* 1 Wert: alle Seiten gleich */
.p-one {
  padding: 20px;
}

/* 2 Werte: oben/unten | links/rechts */
.p-two {
  padding: 8px 32px;
}

/* 3 Werte: oben | links/rechts | unten */
.p-three {
  padding: 8px 24px 32px;
}

/* 4 Werte: oben | rechts | unten | links */
.p-four {
  padding: 4px 16px 28px 40px;
}

<div class="p-one">padding: 20px</div>
<div class="p-two">padding: 8px 32px</div>
<div class="p-three">padding: 8px 24px 32px</div>
<div class="p-four">padding: 4px 16px 28px 40px</div>

Beispiele

Ohne vs. mit Padding

.no-pad {
  background: #fecaca;
  border: 2px solid #dc2626;
}

.with-pad {
  background: #d1fae5;
  border: 2px solid #059669;
  padding: 20px;
}

<div class="no-pad">Ohne Padding: Text klebt am Rand.</div>
<div class="with-pad">Mit Padding: Text hat Luft zum Atmen.</div>

Padding und box-sizing

Ohne border-box wird Padding zur angegebenen Breite hinzuaddiert. Das führt oft dazu, dass Elemente breiter werden als erwartet.

/* Tatsächliche Breite: 244px */
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #dc2626;
}

/* Tatsächliche Breite: 200px */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #059669;
}

<div class="content-box">content-box: 200px + 40px Padding + 4px Border = 244px total</div>
<div class="border-box">border-box: 200px total, Padding wird nach innen gerechnet</div>

Asymmetrisches Padding für Buttons

Buttons haben oft mehr Padding links und rechts als oben und unten, damit sie optisch ansprechend aussehen.

.btn-small {
  padding: 6px 12px;
  font-size: 13px;
}

.btn {
  padding: 10px 24px;
  font-size: 14px;
}

.btn-large {
  padding: 16px 40px;
  font-size: 16px;
}

<button class="btn-small">Klein</button>
<button class="btn">Normal</button>
<button class="btn-large">Groß</button>

Logische Properties: padding-inline und padding-block

Die logischen Varianten beziehen sich auf die Schreibrichtung. In westlichen Sprachen entspricht padding-inline dem horizontalen Padding und padding-block dem vertikalen.

.logical-padding {
  padding-inline: 32px;
  padding-block: 12px;
  background: #dbeafe;
}

<div class="logical-padding">padding-inline: 32px, padding-block: 12px</div>

Barrierefreiheit

Größere Klickflächen durch Padding: Padding vergrößert die Touch-Target-Area von interaktiven Elementen wie Buttons und Links. Das hilft, die WCAG 2.5.8 Mindestgröße von 44x44px zu erreichen, ohne dass der Button selbst optisch riesig wirkt. Ein Button mit padding: 12px 24px ist deutlich leichter zu treffen als einer ohne Padding.

Lesbarkeit durch Luftraum: Text, der direkt an den Rändern eines Containers klebt, ist anstrengend zu lesen. Padding schafft Luftraum und verbessert die Lesbarkeit für alle Nutzer, besonders für Menschen mit Dyslexie oder kognitiven Einschränkungen. Mindestens 12-16px Padding für Textcontainer ist eine gute Faustregel.

Responsive Padding: Zu großes Padding auf kleinen Bildschirmen verschwendet wertvollen Platz. Nutze relative Einheiten (rem, em) oder Funktionen wie clamp(), damit sich das Padding an die Viewport-Größe anpasst und auf mobilen Geräten nicht zu viel Raum verschlingt.

Häufige Fehler

• Negative Padding-Werte: Im Gegensatz zu Margin erlaubt CSS kein negatives Padding. padding: -10px wird ignoriert.
• padding: auto: Es gibt keinen auto-Wert für Padding. Zum Zentrieren verwende margin: auto oder Flexbox.
• Padding vergessen bei width: 100% und content-box: Die Box wird breiter als der Container und erzeugt einen Scrollbalken. Lösung: box-sizing: border-box.
• Padding statt Margin für Abstände zwischen Elementen: Padding erzeugt Abstand innerhalb der Box, Margin zwischen Boxen. Für Abstände zwischen Geschwisterelementen ist Margin die richtige Wahl.
• Zu viel Padding auf kleinen Bildschirmen: Festes Padding von 40px sieht auf dem Desktop gut aus, aber auf dem Handy bleibt kaum Platz für den Inhalt. Verwende responsive Werte oder clamp().

Browser-Kompatibilität

padding und alle Einzeleigenschaften werden von allen Browsern vollständig unterstützt.

Email-Kompatibilität

Padding ist eine der am besten unterstützten CSS-Eigenschaften in HTML-Emails.

Verwandte Eigenschaften