{"id":31438,"date":"2026-09-09T08:00:08","date_gmt":"2026-09-09T06:00:08","guid":{"rendered":"https:\/\/it-service.network\/blog\/?p=31438"},"modified":"2026-09-06T16:14:24","modified_gmt":"2026-09-06T14:14:24","slug":"padding","status":"publish","type":"post","link":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/","title":{"rendered":"Padding ## So entstehen die richtigen Abst\u00e4nde auf Webseiten"},"content":{"rendered":"

Padding geh\u00f6rt zu den grundlegenden Eigenschaften im Webdesign. Der Innenabstand sorgt daf\u00fcr, dass Texte, Bilder und andere Inhalte innerhalb eines Elements ausreichend Platz erhalten.<\/strong><\/p>\n

Wir zeigen, was Padding bedeutet, wie die CSS-Eigenschaft funktioniert und worauf Unternehmen bei responsiven und barrierearmen Webseiten achten sollten.
\n<\/p>\n

\n
Inhaltsverzeichnisexpand_more<\/i><\/div>\n
    \n
  1. Was ist Padding?<\/a><\/li>\n
  2. Warum sind Innenabst\u00e4nde im Webdesign wichtig?<\/a><\/li>\n
  3. Wie funktioniert Padding im CSS-Boxmodell?<\/a><\/li>\n
  4. Welche Werte sind m\u00f6glich?<\/a><\/li>\n
  5. Was ist der Unterschied zwischen Padding und Margin?<\/a><\/li>\n
  6. Wie l\u00e4sst sich Padding sinnvoll einsetzen?<\/a><\/li>\n
  7. IT-Dienstleister unterst\u00fctzen bei Webseiten<\/a><\/li>\n<\/ol>\n<\/div>\n

    Was ist Padding?<\/h2>\n

    Padding<\/strong> bezeichnet im Webdesign<\/strong> den Innenabstand eines Elements<\/strong>. Der Abstand liegt zwischen dem eigentlichen Inhalt und dessen Rahmen. Enth\u00e4lt eine Box beispielsweise einen Text, sorgt Padding daf\u00fcr, dass die Buchstaben nicht unmittelbar am Rand des Elements beginnen.<\/p>\n

    Festgelegt wird der Innenabstand in der Regel \u00fcber Cascading Style Sheets<\/strong>, kurz CSS. Webentwickler k\u00f6nnen bestimmen, wie viel Platz oberhalb, unterhalb sowie links und rechts vom Inhalt vorhanden sein soll. Daf\u00fcr stehen die Eigenschaften<\/strong> padding-top, padding-right, padding-bottom und padding-left zur Verf\u00fcgung. Mit der Kurzschreibweise<\/strong> padding lassen sich alle vier Seiten gemeinsam definieren.<\/p>\n

    Gezielt eingesetzte Innenabst\u00e4nde<\/strong> geh\u00f6ren zu praktisch jeder modernen Webseite. Es schafft beispielsweise Abstand innerhalb von Buttons, Textboxen, Men\u00fcs, Formularen oder Karten und tr\u00e4gt damit wesentlich dazu bei, dass Inhalte \u00fcbersichtlich<\/strong> und gut lesbar dargestellt werden.<\/p>\n

    \"Padding

    Padding schafft Abstand zwischen dem Inhalt eines Elements und dessen Rahmen. Bild: Pexels\/fauxels<\/a><\/p><\/div>\n

    Warum sind Innenabst\u00e4nde im Webdesign wichtig?<\/h2>\n

    Der richtige Abstand<\/strong> entscheidet wesentlich dar\u00fcber, wie \u00fcbersichtlich eine Webseite wirkt. Liegen Texte, Bilder und Bedienelemente zu dicht beieinander, k\u00f6nnen Inhalte schnell unruhig und schwer erfassbar erscheinen. Ausreichende Innenabst\u00e4nde helfen dagegen, einzelne Elemente<\/strong> voneinander abzugrenzen und Informationen klar zu strukturieren.<\/p>\n

    Besonders wichtig ist Padding bei interaktiven Elementen wie Schaltfl\u00e4chen oder Navigationselementen<\/strong>. Durch Innenabst\u00e4nde kann die sichtbare und anklickbare Fl\u00e4che eines Buttons vergr\u00f6\u00dfert werden. Das erleichtert die Bedienung insbesondere auf Smartphones und Tablets, auf denen Nutzer Elemente mit dem Finger ausw\u00e4hlen.<\/p>\n

    Auch f\u00fcr barrierearme Webseiten<\/strong> spielt die Gr\u00f6\u00dfe von Bedienelementen eine Rolle. Die WCAG 2.2 sieht f\u00fcr viele Ziele von Zeigereingaben mindestens 24 mal 24 CSS-Pixel oder einen ausreichenden Abstand zu benachbarten Zielen vor. Padding kann dabei helfen, ausreichend gro\u00dfe Bedienfl\u00e4chen umzusetzen, ersetzt aber keine vollst\u00e4ndige Pr\u00fcfung der Barrierefreiheit<\/strong>.<\/p>\n

    Wie funktioniert Padding im CSS-Boxmodell?<\/h2>\n

    Um Padding zu verstehen, hilft das CSS-Boxmodell<\/strong>. Browser behandeln sichtbare Elemente einer Webseite grunds\u00e4tzlich als rechteckige Boxen. Diese bestehen aus mehreren Bereichen: dem eigentlichen Inhalt, dem Padding, einem m\u00f6glichen Rahmen und dem \u00e4u\u00dferen Abstand.<\/strong><\/p>\n

    Der Inhalt bildet dabei den innersten Bereich. Darum befindet sich das Padding, anschlie\u00dfend folgt der Border beziehungsweise Rahmen. Erst au\u00dferhalb davon liegt der Margin<\/strong>. Wird das Padding vergr\u00f6\u00dfert, entsteht also zus\u00e4tzlicher Platz innerhalb des Elements.<\/p>\n

    Dabei ist auch die CSS-Eigenschaft box-sizing<\/strong> wichtig. Beim standardm\u00e4\u00dfigen content-box kommen Padding und Rahmen zur festgelegten Breite und H\u00f6he eines Elements hinzu. Mit box-sizing: border-box werden sie dagegen in die angegebene Gesamtgr\u00f6\u00dfe einbezogen. Das erleichtert h\u00e4ufig die Berechnung und Ausrichtung von Elementen in modernen Webseitenlayouts.<\/strong><\/p>\n

    \"Das

    Das CSS-Boxmodell unterscheidet zwischen Inhalt, Padding, Rahmen und \u00e4u\u00dferem Abstand. Bild: Pexels\/Pixabay<\/a><\/p><\/div>\n

    Welche Werte sind m\u00f6glich?<\/h2>\n

    Webentwickler<\/strong> k\u00f6nnen Innenabst\u00e4nde f\u00fcr 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\u00fcr oben und unten und der zweite f\u00fcr links und rechts.<\/p>\n

    Bei drei Werten wird zun\u00e4chst der obere Abstand<\/strong> festgelegt, anschlie\u00dfend der gemeinsame Wert f\u00fcr rechts und links und zuletzt der untere Abstand. Vier Werte folgen der Reihenfolge oben, rechts, unten und links. Dadurch lassen sich unterschiedliche Abst\u00e4nde mit einer einzigen CSS-Deklaration<\/strong> definieren.<\/p>\n

    Als Gr\u00f6\u00dfenangaben k\u00f6nnen unter anderem Pixel<\/strong>, Prozentwerte sowie relative Einheiten wie em oder rem eingesetzt werden. Welche Variante geeignet ist, h\u00e4ngt vom jeweiligen Layout ab. Negative Werte<\/strong> sind nicht zul\u00e4ssig. Bei Prozentangaben richtet sich die Berechnung nach der Breite des umgebenden Blocks.<\/p>\n

    Was ist der Unterschied zwischen Padding und Margin?<\/h2>\n

    Padding und Margin werden h\u00e4ufig verwechselt, erf\u00fcllen aber unterschiedliche Aufgaben<\/strong>. Padding erzeugt zus\u00e4tzlichen Platz innerhalb eines Elements zwischen Inhalt und Rahmen. Margin bestimmt dagegen den Abstand au\u00dferhalb des Elements und trennt eine Box von benachbarten Elementen.<\/p>\n

    Ein Beispiel ist eine Schaltfl\u00e4che mit Text<\/strong>. \u00dcber Padding l\u00e4sst sich festlegen, wie viel Platz zwischen der Beschriftung und dem Rand des Buttons vorhanden ist. Mit Margin wird dagegen gesteuert, wie weit diese Schaltfl\u00e4che von einem danebenliegenden Text oder einem anderen Button<\/strong> entfernt ist.<\/p>\n

    Beide Eigenschaften geh\u00f6ren deshalb zu den wichtigsten Werkzeugen f\u00fcr den Aufbau einer Webseite. Werden Innen- und Au\u00dfenabst\u00e4nde<\/strong> konsistent eingesetzt, entstehen \u00fcbersichtliche Layouts und klar erkennbare Bereiche. Zu viele unterschiedliche Abstandswerte k\u00f6nnen dagegen das Erscheinungsbild<\/strong> uneinheitlich machen.<\/p>\n

    \"Padding

    Padding und Margin steuern die Innen- und Au\u00dfenabst\u00e4nde von Elementen und sorgen so f\u00fcr \u00fcbersichtliche Webseitenlayouts. Bild: Pexels\/Tranmautritam<\/a><\/p><\/div>\n

    Wie l\u00e4sst sich Padding sinnvoll einsetzen?<\/h2>\n

    Innenabst\u00e4nde sollte nicht nur auf gro\u00dfen Desktop-Bildschirmen<\/strong> funktionieren. Webseiten werden heute auf unterschiedlichen Displaygr\u00f6\u00dfen genutzt. Responsive Design<\/strong> ber\u00fccksichtigt deshalb, wie Abst\u00e4nde auf Smartphones, Tablets und Computern wirken. Zu gro\u00dfe Innenabst\u00e4nde k\u00f6nnen auf kleinen Displays wertvollen Platz beanspruchen, w\u00e4hrend zu kleine Werte die Lesbarkeit und Bedienbarkeit<\/strong> beeintr\u00e4chtigen.<\/p>\n

    Neben den klassischen Eigenschaften stehen inzwischen auch sogenannte logische CSS-Eigenschaften zur Verf\u00fcgung. padding-inline definiert beispielsweise Abst\u00e4nde entlang der Schreibrichtung, w\u00e4hrend padding-block die Abst\u00e4nde in der Blockrichtung<\/strong> steuert. Dadurch lassen sich Layouts leichter an unterschiedliche Schreibrichtungen und Darstellungsformen<\/strong> anpassen. Beide Eigenschaften sind laut MDN seit 2021 browser\u00fcbergreifend breit verf\u00fcgbar.<\/p>\n

    Auch die digitale Barrierefreiheit<\/a> sollte bei Abst\u00e4nden ber\u00fccksichtigt werden. F\u00fcr bestimmte Produkte und Dienstleistungen gelten in Deutschland seit dem 28. Juni 2025 Vorgaben des Barrierefreiheitsst\u00e4rkungsgesetzes<\/strong>. Dazu geh\u00f6rt unter anderem der elektronische Gesch\u00e4ftsverkehr. Die Bundesfachstelle verweist bei der technischen Umsetzung auch auf etablierte Standards wie die WCAG.<\/p>\n

    IT-Dienstleister unterst\u00fctzen bei Webseiten<\/h2>\n

    Eine professionelle Firmenwebsite<\/strong> muss Design, Technik und Benutzerfreundlichkeit miteinander verbinden. Abst\u00e4nde wirken dabei zun\u00e4chst wie ein kleines Detail, beeinflussen aber die Darstellung von Texten, Men\u00fcs, Formularen und Bedienelementen auf der gesamten Webseite.<\/p>\n

    Die Experten aus dem IT-SERVICE.NETWORK<\/a> unterst\u00fctzen Unternehmen bei der Konzeption und Einrichtung professioneller Webseiten. Zum Leistungsangebot geh\u00f6ren unter anderem Responsive Design, die technische Umsetzung, Content-Management-Systeme<\/a> und die laufende Website-Pflege. Auch Anforderungen an Usability und m\u00f6glichst barrierearmes Surfen werden auf der Leistungsseite des Netzwerks<\/strong> ausdr\u00fccklich genannt.<\/p>\n

    Bestehende Webseiten sollten ebenfalls regelm\u00e4\u00dfig \u00fcberpr\u00fcft werden. Neue Endger\u00e4te<\/strong>, ver\u00e4nderte Browsertechnologien<\/strong> und Anforderungen an die Barrierefreiheit k\u00f6nnen Anpassungen erforderlich machen. Ein konsistentes Layout mit sinnvoll eingesetztem Padding tr\u00e4gt dazu bei, dass Inhalte \u00fcbersichtlich bleiben und Besucher die Webseite<\/strong> auf unterschiedlichen Ger\u00e4ten komfortabel bedienen k\u00f6nnen.<\/p>\n

    \n

    Weiterf\u00fchrende Informationen:<\/strong>
    \n    developer.mozilla<\/a>, w3.org<\/a>, bundesfachstelle-barrierefreiheit,<\/a> mailchimp<\/a>, blog.hubspot<\/a>
    \nZur besseren Lesbarkeit verwenden wir im Text die m\u00e4nnliche Form. Gemeint sind jedoch immer alle Geschlechter und Geschlechtsidentit\u00e4ten.
    \n<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

    Padding geh\u00f6rt zu den grundlegenden Eigenschaften im Webdesign. Der Innenabstand sorgt daf\u00fcr, 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.<\/p>\n","protected":false},"author":35,"featured_media":31468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[811,125],"class_list":["post-31438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-infrastruktur","tag-arbeit-4-0","tag-firmenwebseite"],"yoast_head":"\nPadding: So entstehen die richtigen Abst\u00e4nde auf Webseiten<\/title>\n<meta name=\"description\" content=\"Padding: \u2713 Definition \u2713 CSS-Boxmodell \u2713 Unterschied zu Margin \u2713 Responsive Design \u2713 So setzen Sie Padding richtig ein\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Padding: So entstehen die richtigen Abst\u00e4nde auf Webseiten\" \/>\n<meta property=\"og:description\" content=\"Padding: \u2713 Definition \u2713 CSS-Boxmodell \u2713 Unterschied zu Margin \u2713 Responsive Design \u2713 So setzen Sie Padding richtig ein\" \/>\n<meta property=\"og:url\" content=\"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/\" \/>\n<meta property=\"og:site_name\" content=\"IT-SERVICE.NETWORK Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/itservicenetwork\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-09T06:00:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/\/blog\/wp-content\/uploads\/2026\/09\/padding_pexels-tranmautritam-326514-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"650\" \/>\n\t<meta property=\"og:image:height\" content=\"392\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sandra Morgenroth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITSERVICNETWORK\" \/>\n<meta name=\"twitter:site\" content=\"@ITSERVICNETWORK\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sandra Morgenroth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/\"},\"author\":{\"name\":\"Sandra Morgenroth\",\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/#\\\/schema\\\/person\\\/8c82374611fd45e45b2a5e4e315ec8fc\"},\"headline\":\"Padding ## So entstehen die richtigen Abst\u00e4nde auf Webseiten\",\"datePublished\":\"2026-09-09T06:00:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/\"},\"wordCount\":1197,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/it-service.network\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/padding_pexels-tranmautritam-326514-1.jpg\",\"keywords\":[\"arbeit 4.0\",\"firmenwebseite\"],\"articleSection\":[\"IT-Infrastruktur\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/\",\"url\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/\",\"name\":\"Padding: So entstehen die richtigen Abst\u00e4nde auf Webseiten\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/it-service.network\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/padding_pexels-tranmautritam-326514-1.jpg\",\"datePublished\":\"2026-09-09T06:00:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/#\\\/schema\\\/person\\\/8c82374611fd45e45b2a5e4e315ec8fc\"},\"description\":\"Padding: \u2713 Definition \u2713 CSS-Boxmodell \u2713 Unterschied zu Margin \u2713 Responsive Design \u2713 So setzen Sie Padding richtig ein\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/#primaryimage\",\"url\":\"https:\\\/\\\/it-service.network\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/padding_pexels-tranmautritam-326514-1.jpg\",\"contentUrl\":\"https:\\\/\\\/it-service.network\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/padding_pexels-tranmautritam-326514-1.jpg\",\"width\":650,\"height\":392,\"caption\":\"Padding sorgt im Webdesign f\u00fcr klare Abst\u00e4nde und verbessert die \u00dcbersichtlichkeit von Webseiten. Bild: Pexels\\\/Tranmautritam\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/2026\\\/09\\\/09\\\/padding\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/it-service.network\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Padding ## So entstehen die richtigen Abst\u00e4nde auf Webseiten\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/it-service.network\\\/blog\\\/\",\"name\":\"IT-SERVICE.NETWORK Blog\",\"description\":\"Der IT-SERVICE.NETWORK Blog mit spannenden IT-News: \u2713 IT-Themen \u2713 IT-Trends \u2713 Business-Themen \u2713 IT-Dienstleistungen\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/it-service.network\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/#\\\/schema\\\/person\\\/8c82374611fd45e45b2a5e4e315ec8fc\",\"name\":\"Sandra Morgenroth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/it-service.network\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/avatar_user_35_1780394173.jpg\",\"url\":\"https:\\\/\\\/it-service.network\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/avatar_user_35_1780394173.jpg\",\"contentUrl\":\"https:\\\/\\\/it-service.network\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/avatar_user_35_1780394173.jpg\",\"caption\":\"Sandra Morgenroth\"},\"description\":\"Sandra Morgenroth unterst\u00fctzt seit April 2025 das Marketing-Team als Content-Redakteurin f\u00fcr den Blog des IT-SERVICE.NETWORK. Ihren beruflichen Start machte sie in der Ausbildung zur Medienkauffrau bei der Lippst\u00e4dter Tageszeitung. Danach ging Sandra f\u00fcr das Studium Medien- und Kommunikationsmanagement nach M\u00fcnchen. Nach einigen Jahren im fernen Bayern zog es sie wieder zur\u00fcck in die Heimat. Anfang April 2024 hat sie \u2013 einige verschiedene Job-Stationen im Marketing-, Redaktions- und Personalbereich sp\u00e4ter \u2013 den Sprung in die Selbstst\u00e4ndigkeit gewagt. Parallel dazu schreibt sie f\u00fcr das IT-SERVICE.NETWORK. Gut zu wissen: Das IT-SERVICE.NETWORK ist ein Marketing-Verbund der SYNAXON f\u00fcr IT-Dienstleister, die sich auf die Betreuung von Unternehmen mit bis zu 250 PC-Arbeitspl\u00e4tzen spezialisiert haben. Der Bereich IT und die verschiedenen IT-Themenbereiche haben Sandra bei ihren beruflichen Stationen stets begleitet, sodass sie sich mit ihren neuen Aufgaben direkt wohlgef\u00fchlt hat. F\u00fcr den Blog des IT-SERVICE.NETWORK hat sie immer ein Auge auf neue Trends und Entwicklungen in der Branche, um den Lesern die aktuellsten Insights zu liefern. Privat verbringt Sandra ihre Zeit am liebsten gemeinsam mit ihren Hunden und Schafen in der Natur.\",\"url\":\"https:\\\/\\\/it-service.network\\\/blog\\\/author\\\/sandra-morgenroth\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Padding: So entstehen die richtigen Abst\u00e4nde auf Webseiten","description":"Padding: \u2713 Definition \u2713 CSS-Boxmodell \u2713 Unterschied zu Margin \u2713 Responsive Design \u2713 So setzen Sie Padding richtig ein","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/","og_locale":"de_DE","og_type":"article","og_title":"Padding: So entstehen die richtigen Abst\u00e4nde auf Webseiten","og_description":"Padding: \u2713 Definition \u2713 CSS-Boxmodell \u2713 Unterschied zu Margin \u2713 Responsive Design \u2713 So setzen Sie Padding richtig ein","og_url":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/","og_site_name":"IT-SERVICE.NETWORK Blog","article_publisher":"https:\/\/www.facebook.com\/itservicenetwork\/","article_published_time":"2026-09-09T06:00:08+00:00","og_image":[{"width":650,"height":392,"url":"https:\/\/\/blog\/wp-content\/uploads\/2026\/09\/padding_pexels-tranmautritam-326514-1.jpg","type":"image\/jpeg"}],"author":"Sandra Morgenroth","twitter_card":"summary_large_image","twitter_creator":"@ITSERVICNETWORK","twitter_site":"@ITSERVICNETWORK","twitter_misc":{"Verfasst von":"Sandra Morgenroth","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/#article","isPartOf":{"@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/"},"author":{"name":"Sandra Morgenroth","@id":"https:\/\/it-service.network\/blog\/#\/schema\/person\/8c82374611fd45e45b2a5e4e315ec8fc"},"headline":"Padding ## So entstehen die richtigen Abst\u00e4nde auf Webseiten","datePublished":"2026-09-09T06:00:08+00:00","mainEntityOfPage":{"@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/"},"wordCount":1197,"commentCount":0,"image":{"@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/#primaryimage"},"thumbnailUrl":"https:\/\/it-service.network\/blog\/wp-content\/uploads\/2026\/09\/padding_pexels-tranmautritam-326514-1.jpg","keywords":["arbeit 4.0","firmenwebseite"],"articleSection":["IT-Infrastruktur"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/","url":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/","name":"Padding: So entstehen die richtigen Abst\u00e4nde auf Webseiten","isPartOf":{"@id":"https:\/\/it-service.network\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/#primaryimage"},"image":{"@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/#primaryimage"},"thumbnailUrl":"https:\/\/it-service.network\/blog\/wp-content\/uploads\/2026\/09\/padding_pexels-tranmautritam-326514-1.jpg","datePublished":"2026-09-09T06:00:08+00:00","author":{"@id":"https:\/\/it-service.network\/blog\/#\/schema\/person\/8c82374611fd45e45b2a5e4e315ec8fc"},"description":"Padding: \u2713 Definition \u2713 CSS-Boxmodell \u2713 Unterschied zu Margin \u2713 Responsive Design \u2713 So setzen Sie Padding richtig ein","breadcrumb":{"@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/#primaryimage","url":"https:\/\/it-service.network\/blog\/wp-content\/uploads\/2026\/09\/padding_pexels-tranmautritam-326514-1.jpg","contentUrl":"https:\/\/it-service.network\/blog\/wp-content\/uploads\/2026\/09\/padding_pexels-tranmautritam-326514-1.jpg","width":650,"height":392,"caption":"Padding sorgt im Webdesign f\u00fcr klare Abst\u00e4nde und verbessert die \u00dcbersichtlichkeit von Webseiten. Bild: Pexels\/Tranmautritam"},{"@type":"BreadcrumbList","@id":"https:\/\/it-service.network\/blog\/2026\/09\/09\/padding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/it-service.network\/blog\/"},{"@type":"ListItem","position":2,"name":"Padding ## So entstehen die richtigen Abst\u00e4nde auf Webseiten"}]},{"@type":"WebSite","@id":"https:\/\/it-service.network\/blog\/#website","url":"https:\/\/it-service.network\/blog\/","name":"IT-SERVICE.NETWORK Blog","description":"Der IT-SERVICE.NETWORK Blog mit spannenden IT-News: \u2713 IT-Themen \u2713 IT-Trends \u2713 Business-Themen \u2713 IT-Dienstleistungen","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/it-service.network\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/it-service.network\/blog\/#\/schema\/person\/8c82374611fd45e45b2a5e4e315ec8fc","name":"Sandra Morgenroth","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/it-service.network\/blog\/wp-content\/uploads\/2026\/06\/avatar_user_35_1780394173.jpg","url":"https:\/\/it-service.network\/blog\/wp-content\/uploads\/2026\/06\/avatar_user_35_1780394173.jpg","contentUrl":"https:\/\/it-service.network\/blog\/wp-content\/uploads\/2026\/06\/avatar_user_35_1780394173.jpg","caption":"Sandra Morgenroth"},"description":"Sandra Morgenroth unterst\u00fctzt seit April 2025 das Marketing-Team als Content-Redakteurin f\u00fcr den Blog des IT-SERVICE.NETWORK. Ihren beruflichen Start machte sie in der Ausbildung zur Medienkauffrau bei der Lippst\u00e4dter Tageszeitung. Danach ging Sandra f\u00fcr das Studium Medien- und Kommunikationsmanagement nach M\u00fcnchen. Nach einigen Jahren im fernen Bayern zog es sie wieder zur\u00fcck in die Heimat. Anfang April 2024 hat sie \u2013 einige verschiedene Job-Stationen im Marketing-, Redaktions- und Personalbereich sp\u00e4ter \u2013 den Sprung in die Selbstst\u00e4ndigkeit gewagt. Parallel dazu schreibt sie f\u00fcr das IT-SERVICE.NETWORK. Gut zu wissen: Das IT-SERVICE.NETWORK ist ein Marketing-Verbund der SYNAXON f\u00fcr IT-Dienstleister, die sich auf die Betreuung von Unternehmen mit bis zu 250 PC-Arbeitspl\u00e4tzen spezialisiert haben. Der Bereich IT und die verschiedenen IT-Themenbereiche haben Sandra bei ihren beruflichen Stationen stets begleitet, sodass sie sich mit ihren neuen Aufgaben direkt wohlgef\u00fchlt hat. F\u00fcr den Blog des IT-SERVICE.NETWORK hat sie immer ein Auge auf neue Trends und Entwicklungen in der Branche, um den Lesern die aktuellsten Insights zu liefern. Privat verbringt Sandra ihre Zeit am liebsten gemeinsam mit ihren Hunden und Schafen in der Natur.","url":"https:\/\/it-service.network\/blog\/author\/sandra-morgenroth\/"}]}},"_links":{"self":[{"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/posts\/31438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/comments?post=31438"}],"version-history":[{"count":12,"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/posts\/31438\/revisions"}],"predecessor-version":[{"id":31477,"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/posts\/31438\/revisions\/31477"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/media\/31468"}],"wp:attachment":[{"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/media?parent=31438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/categories?post=31438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/it-service.network\/blog\/wp-json\/wp\/v2\/tags?post=31438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}