padding

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.

Steckbrief padding

Syntax: padding: <length> | <percentage>
Initialwert: 0
Vererbt: Nein
Animierbar: Ja
Kurzform für: padding-top, padding-right, padding-bottom, padding-left

Kategorie: Box-Modell
Werte: 3
Beispiele: 3
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

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

3 Werte

Wert	Beschreibung	Beispiel
`<length>`	Fester Abstand in einer CSS-Einheit.	padding: 16px
`<percentage>`	Prozentualer Abstand, bezogen auf die Breite des Elternelements.	padding: 5%
`0`	Kein Innenabstand.	padding: 0

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):

Padding Shorthand

/* 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

3 Beispiele

Der Effekt von 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>

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

Padding mit content-box vs. border-box

/* 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>

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

Button-Größen über Padding

.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.

Logische Padding-Properties

.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

5 Fehler

01 Negative Padding-Werte

Im Gegensatz zu Margin erlaubt CSS kein negatives Padding. padding: -10px wird ignoriert.

02 padding: auto

Es gibt keinen auto-Wert für Padding. Zum Zentrieren verwende margin: auto oder Flexbox.

03 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.

04 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.

05 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

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

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

padding auf <p> und <div> funktioniert, auf <a> und <td> teilweise nicht
Thunderbird

Komplett
Yahoo Mail

Komplett

Steckbrief padding

Syntax: padding: <length> | <percentage>
Initialwert: 0
Vererbt: Nein
Animierbar: Ja
Kurzform für: padding-top, padding-right, padding-bottom, padding-left

Kategorie: Box-Modell
Werte: 3
Beispiele: 3
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

Inhalt

8 Kapitel

Verwandt

margin border box-sizing

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da