# CSS: Padding vs. Margin – Bestandteile des Box-Modells im Überblick Mithilfe von Cascading Style Sheets, kurz [CSS](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-css/), wird einer Website ein ganz individueller Look verliehen. Mit den CSS-Elementen Padding und Margin können Sie **Einfluss auf das Layout von HTML-Elementen** nehmen und so Ihre Website in puncto Styling auf Vordermann bringen. ## HTML-Grundlagen Um zu verstehen, wie sich CSS Padding vs. Margin auf die Formatierung und den Look Ihrer Website auswirkt, benötigen Sie zunächst das **Wissen um einige HTML-Grundlagen**. In der Auszeichnungssprache können Sie eine ganze Reihe verschiedener Elemente erstellen, die am Ende auf einer Webpräsenz erscheinen. Innerhalb dieser Elemente ist zwischen zwei Gruppen zu unterscheiden: den **Inline- und den Block-Elementen**. Bei Inline-HTML-Elementen handelt es sich um solche Elemente, die **mit dem Text Ihrer Website zusammenfließen** und die keinen eigenen Absatz benötigen. Typische Beispiele hierfür sind das *em*- oder das *b*-Tag, die bereits im HTML-Skript dafür sorgen, dass der Inhalt zwischen dem öffnenden und dem schließenden Tag im Webbrowser als kursiv oder fettgedruckt dargestellt wird. Im Gegensatz zu Inline-Elementen benötigen die ihnen übergeordneten Block-Elemente einen **eigenen Absatz**. Sie können sich Block-Elemente dementsprechend als eine Art Kasten vorstellen, der über die gesamte Breite Ihres Bildschirmes reicht. Analog dazu können Sie die Breite und Höhe von Block-Elementen natürlich anpassen, sodass der Kasten relativ zum Bildschirm verkleinert oder auch vergrößert wird. Block-Elemente können **relativ zueinander ausgerichtet** werden und sind somit wesentlicher Bestandteil für das Layout einer Website. Typische Vertreter dieser Kategorie von HTML-Elementen sind beispielsweise die Überschriften *h1* bis *h6* sowie der *div*-Container. --- ### Tipp Sie haben noch keine eigene Website? Kein Problem! Mithilfe von IONOS können Sie in nur wenigen Minuten Ihre ganz persönliche [Website mit eigener Domain](https://www.ionos.de/websites/website-mit-eigener-domain "IONOS Website mit eigener Domain") erstellen. Mit unserem [Webhosting](https://www.ionos.de/hosting/webhosting "Webhosting bei IONOS") erhalten Sie Ihre Wunschdomain inklusive SSL-Zertifikat und DDoS-Schutz. --- ## Was ist Padding? Wenn Sie sich einmal mit der grundlegenden Struktur von verschiedenen HTML-Elementen vertraut gemacht haben, ist es ein Leichtes, zu verstehen, was genau mit CSS Padding gemeint ist. Mit Padding wird kurz gesagt der **Innenabstand** vom Inhalt eines Elements zu den Elementgrenzen bezeichnet. Auch hierbei hilft es, sich **Block-Elemente als Kasten vorzustellen**. Wenn Sie beispielsweise einen *div*-Container erstellen, bezeichnen die CSS-Eigenschaften padding-top, padding-left, padding-bottom und padding-right je den Abstand des textuellen Inhalts zu den Seiten des Kastens, der für dieses HTML-Element erstellt wurde. Ein Codebeispiel, in dem wir [CSS in HTML einbinden](https://www.ionos.de/digitalguide/websites/webdesign/css-in-html-einbinden/ "CSS in HTML einbinden"), hilft zur Veranschaulichung: ```html

So verwenden Sie Padding:

Dieses div-Element besitzt folgende padding-Werte:
``` Der *div*-Container, der durch den obigen Code erstellt worden ist, sieht wie folgt aus: [![Bild: HTML-Container, dessen Inhalt mithilfe von Padding platziert wurde](https://www.ionos.de/digitalguide/fileadmin/_processed_/5/6/csm_html-container-padding_f105868a23.webp "HTML-Container, dessen Inhalt mithilfe von Padding platziert wurde")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/html-container-padding.png) Für diesen -Container wurden die angegebenen Padding-Werte genutzt. Der Innenabstand des Textes hat sich entsprechend verändert. ## Padding-Syntax Man kann CSS-Padding auf verschiedene Weisen verwenden. Ein praktischer [CSS-Trick](https://www.ionos.de/digitalguide/websites/webdesign/css-tricks-die-sie-unbedingt-kennen-sollten/) ist die Nutzung von **Kurzschreibweisen**, sogenannten Shorthands. Verschiedene Shorthand-Schreibweisen können Ihnen je nach Bedarf dabei helfen, Ihren [CSS-Code zu komprimieren](https://www.ionos.de/digitalguide/websites/webdesign/css-komprimieren-und-die-performance-verbessern/). ### Nennung aller vier Werte Die einfachste Methode ist es, für alle vier Seiten des Elements den Innenabstand anzugeben, den Sie erreichen möchten. Hierzu nutzen Sie die **einzelnen CSS-Befehle padding-top, padding-left, padding-bottom und padding-right**. Sie können auch die Shorthand-Syntax verwenden: ```html padding: 100px 50px 40px 50px; ``` Hierbei geben Sie **alle vier Werte in einem Befehl** an. Die Reihenfolge ist: Padding oben, Padding rechts, Padding unten und Padding links. Egal, für welche Schreibweise Sie sich entscheiden, die Größe Ihres Paddings kann dabei mit **verschiedenen Einheiten** angegeben werden: Wenn Sie sich für eine Angabe in Pixeln entscheiden, dann ist dies ein **fester Wert**, der nicht verändert wird. Wenn Sie beispielsweise mit [CSS Media Queries](https://www.ionos.de/digitalguide/websites/webdesign/css-media-queries/) arbeiten und möchten, dass sich Ihre Website dynamisch an verschiedene Bildschirmgrößen anpasst, ist dieses Vorgehen ungeeignet; Sie müssten für jede Bildschirmgröße neue Angaben spezifizieren. Um sich diesen Aufwand zu ersparen, wird häufig auf eine **prozentuelle Angabe** des Innenabstands zurückgegriffen. Die Prozentzahl bezieht sich dabei auf die Boxhöhe bzw. -breite. ### Nennung von nur drei Werten Je nach Anwendungszweck benötigen Sie **nicht alle vier Werte**, um das Padding für Ihre Website anzupassen. Die Nennung von nur drei Werten in der Shorthand-Syntax von Padding bedeutet, dass der erste Wert für den Innenabstand nach oben (padding-top), der zweite Wert für den Innenabstand zu den Seiten (padding-right und padding-left) und der dritte Wert für den Innenabstand nach unten (padding-bottom) eingesetzt wird. Dies ist insbesondere dann praktisch, wenn Sie den Inhalt eines Elements auf der **horizontalen Achse zentrieren** möchten. ### Nennung von nur zwei Werten Analog verhält sich die Nennung von zwei Werten, wobei der erste Wert als der Abstand nach oben und nach unten, der zweite Wert als der Abstand nach rechts und nach links interpretiert wird. ### Nennung von einem Wert Sie denken es sich bereits: Ein einziger Wert, der hinter dem CSS-Element Padding angegeben wird, führt dazu, dass der Innenabstand zu allen vier Seiten Ihres Elements identisch ist. Auf diese Weise können Sie den Inhalt in Ihrem Element perfekt zentriert ausrichten. ## Was ist Margin? Wenn Sie [CSS lernen](https://www.ionos.de/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/ "CSS-Lernen leicht gemacht"), kommen Sie auch an Margin nicht vorbei. Hierbei handelt es sich ebenfalls um ein CSS-Element, das verwendet wird, um das Layout von einzelnen HTML-Elementen und Ihrer Website anzupassen. Im Gegensatz zum Padding bezeichnet Margin den **Außenabstand**, den ein Element zu anderen benachbarten Elementen oder zu den Grenzen Ihrer Website hat. Glücklicherweise ist die Syntax von Margin identisch zu der Syntax von Padding, sodass Sie sich nur eine Schreibweise merken müssen. Auch die **Margin-Shorthand-Schreibweisen** mit vier, drei, zwei oder nur einem Wert sind analog zu den Shorthand-Schreibweisen von Padding. Am besten lässt sich der Außenabstand Margin mithilfe eines einfachen Codebeispiels verdeutlichen, in dem zwei *div*-Container erstellt werden: ```html
Ein erster Beispielcontainer.
Ein zweiter Beispielcontainer. Der Abstand der beiden Container zueinander wird durch Margin bestimmt.
``` [![Bild: HTML-Container, deren Abstand zueinander mithilfe von Margin angepasst wurde](https://www.ionos.de/digitalguide/fileadmin/_processed_/8/b/csm_html-container-margin_8ab2790aa8.webp "HTML-Container, deren Abstand zueinander mithilfe von Margin angepasst wurde")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/html-container-margin.png) Der Außenabstand dieser beiden -Container zueinander und zu den Seiten wurde mit Margin bestimmt. ## Die Anwendung der CSS-Elemente im Überblick Wann immer Sie Inhalt relativ zu seinem Elternelement formatieren möchten, nutzen Sie Padding. Sobald Sie mehrere Elemente relativ zueinander oder relativ zu den Bildschirm- bzw. Fenstergrößen platzieren müssen, ist Margin das Mittel Ihrer Wahl. In der Praxis treten die beiden [CSS-Befehle](https://www.ionos.de/digitalguide/websites/webdesign/css-befehle/ "CSS-Befehle") selten allein auf: **Meistens müssen Padding und Margin kombiniert werden**, um den Look zu erhalten, den Sie sich für Ihre Website wünschen. Das geht ganz einfach, indem Sie beide CSS-Elemente in Ihrer HTML- oder CSS-Datei benennen und die entsprechenden Werte festlegen. --- ### Tipp Falls Sie sich ganz auf den Inhalt Ihrer Webpräsenz konzentrieren möchten, stellt Ihnen der IONOS [Homepage Baukasten](https://www.ionos.de/websites/homepage-baukasten "Homepage Baukasten bei IONOS") eine ganze Reihe professioneller Templates zur Verfügung. --- ## Das Boxmodell: CSS Padding vs. Margin Die Unterschiede von Margin und Padding kann man sich im bekannten **Boxmodell** besonders gut vor Augen führen. [![Bild: Schaubild zum CSS-Boxmodell mit Padding, Margin und Border](https://www.ionos.de/digitalguide/fileadmin/_processed_/e/5/csm_css-boxmodell-padding-margin_73a6563198.webp "Schaubild zum CSS-Boxmodell mit Padding, Margin und Border")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Schaubilder/css-boxmodell-padding-margin.png) Im direkten Vergleich Padding vs. Margin werden die Unterschiede zwischen den CSS-Elementen besonders deutlich. --- ### Tipp Sie möchten mehr über verschiedene CSS-Befehle erfahren? Unsere Leseempfehlungen helfen Ihnen dabei: - [CSS-Tutorial ](https://www.ionos.de/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/) - [CSS-Grid](https://www.ionos.de/digitalguide/websites/webseiten-erstellen/css-grid/) - [CSS-Flexbox ](https://www.ionos.de/digitalguide/websites/webseiten-erstellen/css-flexbox/) Weitere Artikel zum Thema Webentwicklung: - [Less](https://www.ionos.de/digitalguide/websites/web-entwicklung/less-css-tutorial/) - [SAAS](https://www.ionos.de/digitalguide/server/knowhow/saas-software-as-a-service-im-ueberblick-vor-und-nachteile/) - [YAML](https://www.ionos.de/digitalguide/websites/web-entwicklung/yaml-das-schlanke-css-framework-fuer-experten/) - [Moderne Webentwicklung](https://www.ionos.de/digitalguide/websites/web-entwicklung/grundlagen-der-modernen-webentwicklung/) --- This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/css-padding-vs-margin/](https://www.ionos.de/digitalguide/websites/web-entwicklung/css-padding-vs-margin/) for AI/LLM consumption.