CSS-Padding
Margin schiebt Boxen auseinander. Oft brauchen Sie auch Platz innen in der Box — damit Text nicht am Rahmen klebt und Buttons leicht tippbar sind. Dieses innere Polster ist padding.
Was ist Padding?
Padding ist leerer Raum zwischen dem Inhalt eines Elements und seinem Rahmen. Es liegt innerhalb des Rahmens. Mehr Padding rückt den Inhalt von den Kanten weg und die Box wird meist größer (außer Sie ändern später box-sizing).
Padding vs. Margin auf einen Blick
Die beiden werden leicht verwechselt. Halten Sie die Aufgaben getrennt.
📊 Padding vs. Margin
| Werkzeug | Wo es sitzt | Alltag |
|---|---|---|
padding |
Innerhalb des Rahmens | Text polstern, Klickfläche vergrößern |
margin |
Außerhalb des Rahmens | Diese Box von Nachbarn trennen |
| Hintergrund | Füllt meist das Padding | Farbe/Bild bedeckt oft das Polster |
| Vertikales Collapse | Padding kollabiert nicht | Margins gestapelter Blöcke können |
Gleichmäßiges Padding auf jeder Seite
Beginnen Sie mit einer Länge für eine ruhige Karte.
Gleiches Padding auf allen Seiten
css.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* äußerer Abstand — anderes Werkzeug */
}Was Sie sehen sollten
Der Text sitzt weg vom grauen Rahmen. Der weiße Hintergrund füllt auch die Padding-Zone — nicht nur die Buchstaben.
Zwei Werte — vertikal, dann horizontal
Zwei Längen paaren gegenüberliegende Seiten: zuerst oben und unten; dann links und rechts.
Vertikales dann horizontales Padding
css.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}Vier Werte — im Uhrzeigersinn ab oben
Wenn jede Seite eigenes Polster braucht: oben → rechts → unten → links.
Vierseitige Padding-Kurzform
css.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}Buttons lieben Padding
Padding vergrößert die angenehme Trefferfläche, ohne die Schriftgröße des Labels zu ändern. Ein kurzes Label mit großzügigem Padding wirkt modern und leicht klickbar.
Button mit Padding
css.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}Hintergrund füllt das Padding
Anders als Margin (außen) gehört Padding noch zur bemalten Box des Elements. Eine Hintergrundfarbe oder ein Bild bedeckt meist die Padding-Zone.
Farbige Padding-Zone
css.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}Selbst ausprobieren
- Karte mit
padding: 16pxund sichtbarem Rahmen — Text klebt nicht an der Kante. - Als
padding: 20px 12pxumschreiben und höheres vs. breiteres Polster spüren. - Button mit mehr horizontalem als vertikalem Padding.
- Türkises Banner mit großem Padding und dunklerem Rahmen — Farbe füllt das Polster.
- Zwei Karten nur mit
margindazwischen, dann nurpaddinginnen — die unterschiedlichen Jobs spüren.
Typische Fehler
- Padding nutzen, um Boxen zu trennen (das ist Margin)
- Erwarten, dass Paddings zwischen Geschwistern wie vertikale Margins kollabieren (tun sie nicht)
- Vergessen, dass der Hintergrund meist durch die Padding-Zone malt
- Riesiges Padding überall, wenn eine bescheidene Skala sauberer wäre
- Die Vierer-Reihenfolge verwechseln (oben, rechts, unten, links)
Kurzfassung
- Padding ist innerer Raum zwischen Inhalt und Rahmen
- Kurzform: 1, 2 oder 4 Werte (vier im Uhrzeigersinn ab oben)
- Hintergrund füllt meist die Padding-Zone
- Padding kollabiert nicht wie vertikale Margins können
- Buttons und Karten brauchen Padding für Komfort
- Margin bleibt der äußere Cousin — beide Werkzeuge scharf halten
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt