Padding

Padding gehört zu den grundlegenden Eigenschaften im Webdesign. Der Innenabstand sorgt dafür, dass Texte, Bilder und andere Inhalte innerhalb eines Elements ausreichend Platz erhalten.

Wir zeigen, was Padding bedeutet, wie die CSS-Eigenschaft funktioniert und worauf Unternehmen bei responsiven und barrierearmen Webseiten achten sollten.

Was ist Padding?

Padding bezeichnet im Webdesign den Innenabstand eines Elements. Der Abstand liegt zwischen dem eigentlichen Inhalt und dessen Rahmen. Enthält eine Box beispielsweise einen Text, sorgt Padding dafür, dass die Buchstaben nicht unmittelbar am Rand des Elements beginnen.

Festgelegt wird der Innenabstand in der Regel über Cascading Style Sheets, kurz CSS. Webentwickler können bestimmen, wie viel Platz oberhalb, unterhalb sowie links und rechts vom Inhalt vorhanden sein soll. Dafür stehen die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zur Verfügung. Mit der Kurzschreibweise padding lassen sich alle vier Seiten gemeinsam definieren.

Gezielt eingesetzte Innenabstände gehören zu praktisch jeder modernen Webseite. Es schafft beispielsweise Abstand innerhalb von Buttons, Textboxen, Menüs, Formularen oder Karten und trägt damit wesentlich dazu bei, dass Inhalte übersichtlich und gut lesbar dargestellt werden.

Warum sind Innenabstände im Webdesign wichtig?

Der richtige Abstand entscheidet wesentlich darüber, wie übersichtlich eine Webseite wirkt. Liegen Texte, Bilder und Bedienelemente zu dicht beieinander, können Inhalte schnell unruhig und schwer erfassbar erscheinen. Ausreichende Innenabstände helfen dagegen, einzelne Elemente voneinander abzugrenzen und Informationen klar zu strukturieren.

Besonders wichtig ist Padding bei interaktiven Elementen wie Schaltflächen oder Navigationselementen. Durch Innenabstände kann die sichtbare und anklickbare Fläche eines Buttons vergrößert werden. Das erleichtert die Bedienung insbesondere auf Smartphones und Tablets, auf denen Nutzer Elemente mit dem Finger auswählen.

Auch für barrierearme Webseiten spielt die Größe von Bedienelementen eine Rolle. Die WCAG 2.2 sieht für viele Ziele von Zeigereingaben mindestens 24 mal 24 CSS-Pixel oder einen ausreichenden Abstand zu benachbarten Zielen vor. Padding kann dabei helfen, ausreichend große Bedienflächen umzusetzen, ersetzt aber keine vollständige Prüfung der Barrierefreiheit.

Wie funktioniert Padding im CSS-Boxmodell?

Um Padding zu verstehen, hilft das CSS-Boxmodell. Browser behandeln sichtbare Elemente einer Webseite grundsätzlich als rechteckige Boxen. Diese bestehen aus mehreren Bereichen: dem eigentlichen Inhalt, dem Padding, einem möglichen Rahmen und dem äußeren Abstand.

Der Inhalt bildet dabei den innersten Bereich. Darum befindet sich das Padding, anschließend folgt der Border beziehungsweise Rahmen. Erst außerhalb davon liegt der Margin. Wird das Padding vergrößert, entsteht also zusätzlicher Platz innerhalb des Elements.

Dabei ist auch die CSS-Eigenschaft box-sizing wichtig. Beim standardmäßigen content-box kommen Padding und Rahmen zur festgelegten Breite und Höhe eines Elements hinzu. Mit box-sizing: border-box werden sie dagegen in die angegebene Gesamtgröße einbezogen. Das erleichtert häufig die Berechnung und Ausrichtung von Elementen in modernen Webseitenlayouts.

Welche Werte sind möglich?

Webentwickler können Innenabstände für jede Seite einzeln festlegen oder die Kurzschreibweise verwenden. Bei padding: 20px erhalten beispielsweise alle vier Seiten denselben Innenabstand. Werden zwei Werte angegeben, gilt der erste für oben und unten und der zweite für links und rechts.

Bei drei Werten wird zunächst der obere Abstand festgelegt, anschließend der gemeinsame Wert für rechts und links und zuletzt der untere Abstand. Vier Werte folgen der Reihenfolge oben, rechts, unten und links. Dadurch lassen sich unterschiedliche Abstände mit einer einzigen CSS-Deklaration definieren.

Als Größenangaben können unter anderem Pixel, Prozentwerte sowie relative Einheiten wie em oder rem eingesetzt werden. Welche Variante geeignet ist, hängt vom jeweiligen Layout ab. Negative Werte sind nicht zulässig. Bei Prozentangaben richtet sich die Berechnung nach der Breite des umgebenden Blocks.

Was ist der Unterschied zwischen Padding und Margin?

Padding und Margin werden häufig verwechselt, erfüllen aber unterschiedliche Aufgaben. Padding erzeugt zusätzlichen Platz innerhalb eines Elements zwischen Inhalt und Rahmen. Margin bestimmt dagegen den Abstand außerhalb des Elements und trennt eine Box von benachbarten Elementen.

Ein Beispiel ist eine Schaltfläche mit Text. Über Padding lässt sich festlegen, wie viel Platz zwischen der Beschriftung und dem Rand des Buttons vorhanden ist. Mit Margin wird dagegen gesteuert, wie weit diese Schaltfläche von einem danebenliegenden Text oder einem anderen Button entfernt ist.

Beide Eigenschaften gehören deshalb zu den wichtigsten Werkzeugen für den Aufbau einer Webseite. Werden Innen- und Außenabstände konsistent eingesetzt, entstehen übersichtliche Layouts und klar erkennbare Bereiche. Zu viele unterschiedliche Abstandswerte können dagegen das Erscheinungsbild uneinheitlich machen.

Wie lässt sich Padding sinnvoll einsetzen?

Innenabstände sollte nicht nur auf großen Desktop-Bildschirmen funktionieren. Webseiten werden heute auf unterschiedlichen Displaygrößen genutzt. Responsive Design berücksichtigt deshalb, wie Abstände auf Smartphones, Tablets und Computern wirken. Zu große Innenabstände können auf kleinen Displays wertvollen Platz beanspruchen, während zu kleine Werte die Lesbarkeit und Bedienbarkeit beeinträchtigen.

Neben den klassischen Eigenschaften stehen inzwischen auch sogenannte logische CSS-Eigenschaften zur Verfügung. padding-inline definiert beispielsweise Abstände entlang der Schreibrichtung, während padding-block die Abstände in der Blockrichtung steuert. Dadurch lassen sich Layouts leichter an unterschiedliche Schreibrichtungen und Darstellungsformen anpassen. Beide Eigenschaften sind laut MDN seit 2021 browserübergreifend breit verfügbar.

Auch die digitale Barrierefreiheit sollte bei Abständen berücksichtigt werden. Für bestimmte Produkte und Dienstleistungen gelten in Deutschland seit dem 28. Juni 2025 Vorgaben des Barrierefreiheitsstärkungsgesetzes. Dazu gehört unter anderem der elektronische Geschäftsverkehr. Die Bundesfachstelle verweist bei der technischen Umsetzung auch auf etablierte Standards wie die WCAG.

IT-Dienstleister unterstützen bei Webseiten

Eine professionelle Firmenwebsite muss Design, Technik und Benutzerfreundlichkeit miteinander verbinden. Abstände wirken dabei zunächst wie ein kleines Detail, beeinflussen aber die Darstellung von Texten, Menüs, Formularen und Bedienelementen auf der gesamten Webseite.

Die Experten aus dem IT-SERVICE.NETWORK unterstützen Unternehmen bei der Konzeption und Einrichtung professioneller Webseiten. Zum Leistungsangebot gehören unter anderem Responsive Design, die technische Umsetzung, Content-Management-Systeme und die laufende Website-Pflege. Auch Anforderungen an Usability und möglichst barrierearmes Surfen werden auf der Leistungsseite des Netzwerks ausdrücklich genannt.

Bestehende Webseiten sollten ebenfalls regelmäßig überprüft werden. Neue Endgeräte, veränderte Browsertechnologien und Anforderungen an die Barrierefreiheit können Anpassungen erforderlich machen. Ein konsistentes Layout mit sinnvoll eingesetztem Padding trägt dazu bei, dass Inhalte übersichtlich bleiben und Besucher die Webseite auf unterschiedlichen Geräten komfortabel bedienen können.

---

Weiterführende Informationen:
developer.mozilla, w3.org, bundesfachstelle-barrierefreiheit, mailchimp, blog.hubspot
Zur besseren Lesbarkeit verwenden wir im Text die männliche Form. Gemeint sind jedoch immer alle Geschlechter und Geschlechtsidentitäten.