Padding bezeichnet im Webdesign den Innenabstand zwischen dem Inhalt eines Elements und seinem Rand. Es sorgt dafür, dass Texte, Bilder oder Buttons „atmen“ können – also nicht zu dicht an den Rand oder an andere Elemente gedrückt wirken.
Padding einfach erklärt
Ein Beispiel: Ein Button enthält den Text „Mehr erfahren“. Ohne Padding liegt der Text direkt am Rand des Buttons. Mit Padding entsteht ein optisch angenehmer Freiraum – oben, unten, rechts und links.
Padding wird meist in Pixeln (px), em oder Prozent angegeben, z. B.:
cssKopierenBearbeitenpadding: 20px;
Damit wird in alle Richtungen ein Abstand von 20 px erzeugt.
Unterschied zu Margin
Padding ist nicht zu verwechseln mit Margin. Während Padding innerhalb eines Elements wirkt, sorgt Margin für den Abstand zu anderen Elementen.
Warum ist Padding wichtig?
- Für ein übersichtliches Layout
- Für eine bessere Lesbarkeit
- Für ein stimmiges Design, besonders im Responsive Design
Der Klicklounge-Tipp: Wir achten bei jedem Projekt auf ein durchdachtes Zusammenspiel von Padding, Margin und Zeilenabstand – für eine klare, angenehme Benutzerführung auf allen Endgeräten.