Margin vs Padding (Unterschied und Verwendung)

Margin und Padding sind zwei grundlegende Konzepte im Bereich der Webentwicklung und des Webdesigns. Sie werden hauptsächlich in CSS (Cascading Style Sheets) verwendet und spielen eine entscheidende Rolle bei der Erstellung einzigartiger Designs und Layouts für Webseiten.

Jeder angehende Webdesigner muss genau wissen, was Ränder und Innenabstand sind, was der Unterschied zwischen Rand und Innenabstand ist und wie man sie verwendet. Lesen Sie also weiter, um mehr über diese beiden Stileigenschaften zu erfahren, die Ihr Seitenerstellungsspiel auf die nächste Stufe heben werden.

Sie können sich einen Margin als „Atempause“ für ein Element vorstellen. Durch die Anpassung können Sie den Abstand zwischen verschiedenen Elementen steuern und so ein elegantes und individuelles Layout erstellen.

Abhängig von den Werten der Randeigenschaften wird das Element von den angrenzenden Elementen oder Seitenrändern weg oder in Richtung davon verschoben. Darüber hinaus kann sich die Größe eines Elements ändern, um in den festgelegten Rand zu passen.

Das folgende Diagramm veranschaulicht die Ränder zwischen den Seitenrändern und einem Element. Der Block hat einen horizontalen Randwert von 10 Pixel (10px) und einen vertikalen Randwert von 12 Pixel (12px).

Mit anderen Worten: Der Padding definiert die Größe des Rahmens, der den Inhalt (Bild, Text usw.) innerhalb eines Webseitenelements umschließt.

Die Größe des Inhalts wird verkleinert oder vergrößert, um den Füllabstand zu den Rändern des Elements beizubehalten.

Unten sehen Sie ein Beispiel für ein Element mit einem horizontalen Abstand von 10px (10 Pixel) und einem vertikalen Abstand von 7px (7 Pixel).

Wenn Sie die Position eines Elements im Verhältnis zum Seitenlayout ändern oder einen Abstand zwischen benachbarten Elementen festlegen möchten, müssen Sie Ränder verwenden.

Sie sollten den Abstand festlegen, um die Position des Inhalts innerhalb des Elementrahmens zu ändern.
Die folgende Tabelle zeigt die wichtigsten Unterschiede zwischen Margin und Padding.

Wann sollte man Margin verwenden

Der Hauptzweck der Eigenschaft „margin“ besteht darin, Platz um ein Element herum zu schaffen. Im Gegensatz zum Innenabstand hat sie keinen Einfluss auf das Layout innerhalb des Elements. Es wirkt sich nur auf den Weltraum aus und drückt Elemente auseinander oder aufeinander zu.

Margin hat keine Styling-Eigenschaften. Der Raum außerhalb der Grenze ist unsichtbar und wird auch als „Leerraum“ bezeichnet.

Somit ermöglichen Ihnen Margen die Durchführung der folgenden Aktionen auf Ihrer Website.

Kontrolle über die Elementpositionierung

Mit Margin haben Sie eine präzise Kontrolle über die Elementpositionierung. Durch Anpassen des Randes können Sie ein Element auf Ihrer Webseite nach links, rechts, oben oder unten verschieben.

Einen Abstand zwischen benachbarten Elementen festlegen

Eine der Hauptfunktionen eines Randes besteht darin, einen Abstand zwischen benachbarten Elementen festzulegen. Durch die Anpassung des Randes wird sichergestellt, dass sich Elemente nicht überlappen und Ihre Webseite ästhetisch bleibt.

Überlappende Elemente

Anstatt einen Abstand zwischen Elementen festzulegen, können Sie den Margin verwenden, um benachbarte Elemente zu überlappen und so einfallsreiche und faszinierende Designs zu erstellen. Sie können dies erreichen, indem Sie einen negativen Randwert verwenden und so die Elemente näher zueinander bringen.

Unten sehen Sie ein Beispiel einer Webseite mit überlappenden Elementen mit negativen Margins.

Verbesserte Lesbarkeit

Sie können die Lesbarkeit Ihrer Webseiten verbessern, indem Sie Ränder verwenden, um den Abstand zwischen dem Text und anderen HTML-Elementen anzupassen.

Ästhetische Verbesserung

Das Hinzufügen von mehr Platz zwischen den Elementen gibt ihnen „Raum zum Atmen“. Die Elemente werden nicht überladen, und dadurch wird das Design Ihrer Webseite verbessert.

Ausrichtung

Ränder können ein Element innerhalb seines übergeordneten Elements oder der Seite selbst zentrieren, indem sie den linken und rechten Rand auf „auto“ setzen.

Responsive Design

Margins können Ihre Webseiten reaktionsfähig machen, um die Designkonsistenz über verschiedene Bildschirmgrößen hinweg zu gewährleisten. Sie können dies erreichen, indem Sie Prozentsätze anstelle von festen Werten für eine CSS-Margin verwenden.

Wann sollte man Padding verwenden

Padding ist der Abstand zwischen den Grenzen eines Elements und seinem Inhalt. Indem Sie den Padding manipulieren, definieren Sie die Position und Größe des Inhalts innerhalb des Innenraums des übergeordneten Elements.

In Anbetracht des oben Gesagten bietet Padding einige nützliche Anwendungen zur Verbesserung Ihres Webdesigns.

Hinzufügen von Leerzeichen zwischen dem Rand eines Elements und seinem Inhalt

Indem Sie den Abstand innerhalb eines Elements ändern, passt der Inhalt besser in die Elementränder und Sie können eine Designkonsistenz herstellen. Nach Ihrem Ermessen können Sie mehr „Leerraum“ zwischen dem Text oder Bild und seinem hinzufügen Ränder verschieben oder näher an die Elementkanten heranführen.

Die Größe eines Elements ändern

Mit Padding können Sie die Inhaltsgröße intakt lassen und nur den umgebenden Raum innerhalb des Elements beeinflussen. Dadurch können Sie benutzerdefinierte Größen für Elemente mit unterschiedlichen Zwecken festlegen. Sie können beispielsweise den anklickbaren Bereich einer Schaltfläche erweitern oder den Platz um ein statisches Bild verringern.

Verbesserte Lesbarkeit

Sie können Padding verwenden, um Abstand zwischen dem Inhalt eines Elements (z. B. Text) und seinem Rand zu schaffen. So können Sie die Lesbarkeit und Benutzererfahrung Ihrer Website verbessern, indem Sie den Innenabstand ändern.

Den Inhalt von den Elementrändern trennen

Durch Erhöhen des Abstands können Sie eine visuelle Unterscheidung zwischen einem Bild oder Text und seinen Rändern erzielen. Dies kann nützlich sein, wenn die Ränder sichtbar sind und Sie den Text leicht unterscheidbar machen möchten.

Designverbesserung

Padding kann verhindern, dass Ihre Webseite überladen wirkt, indem es Platz um den Inhalt herum schafft und so die optische Gesamtattraktivität erhöht.

Responsive Design

Sie können die Padding-Eigenschaften mit Prozentsätzen festlegen, um das Design der Elemente ansprechend zu gestalten. Auf diese Weise bleibt Ihr Webdesign auf verschiedenen Bildschirmgrößen konsistent.

In der Mitte der Box befindet sich der Inhalt. Es ist von einer Padding umgeben, die bis zum Rahmen reicht. Der Rahmen umrahmt den Inhalt und seine Padding. Schließlich ist das Rahmenfeld von einem Margin umgeben, der eine unsichtbare Barriere darstellt, die das HTML-Element von anderen Komponenten trennt.

Das Box-Modell ist entscheidend für das Verständnis und die Bearbeitung der Struktur von HTML-Elementen. Wenn Sie das Konzept beherrschen, können Sie die Größe, Position und Ausrichtung Ihrer Webkomponenten ändern, ohne das allgemeine Layout zu beeinträchtigen.

Wie man Margin in CSS hinzufügen kann

Mit der „Margin-Eigenschaft“ in CSS können Sie einem Element einen Rand zuweisen. Für die Implementierung des Codes gibt es zwei Möglichkeiten:

• Margin direkt als Inline-Code zum HTML-Code der Webseite hinzufügen.
• Hinzufügen der Margin-Eigenschaft zu einer separaten CSS-Datei, die eine Reihe von Stilregeln enthält, die auf Ihre Webseiten angewendet werden.

Im Allgemeinen ist es die bessere Vorgehensweise, die Rand- und Abstandseinstellungen in einer CSS-Datei beizubehalten. Dadurch wird Ihr HTML-Code leichter und sauberer und die Effizienz Ihres CSS-Stils erhöht.

Unabhängig von der gewählten Methode ist der Vorgang zum Hinzufügen einer Marge derselbe. Folgen Sie den unteren Schritten.

Schritt 1. Das Element identifizieren

Zunächst müssen Sie das Element identifizieren, zu dem Sie einen Rand hinzufügen möchten. Es kann sich um einen Absatz (p), eine Überschrift (h1, h2 usw.), ein div oder ein anderes HTML-Element handeln.

Schritt 2. Die Margin-Eigenschaft definieren

Nachdem Sie das Element ausgewählt haben, fügen Sie mit CSS die Randeigenschaft hinzu. Weisen Sie dem Rand einen Wert zu, der die Größe des Bereichs um die Elementränder definiert. Der Wert kann wie folgt zugewiesen werden:

• Feste Länge – meist in Pixel (px).
• Prozentsatz – stellt die Randgröße als Prozentsatz der Containerbreite dar.
• Auto – lässt den Browser den Spielraum automatisch berechnen.
• Erben – das Element erbt den Rand seines übergeordneten Elements.

Stellen Sie den Margin auf jeder Seite einzeln ein

Um den Rand für jede Seite individuell festzulegen, verwenden Sie die folgenden Eigenschaften:

• margin-top – legt den Rand über der Oberseite eines Elements fest.
• margin-right – fügt einen Rand auf der rechten Seite eines Elements hinzu.
• margin-bottom – legt den Rand unter der Unterseite eines Elements fest.
• margin-left – legt den Rand auf der linken Seite fest.

Beispielsweise möchten wir auf allen vier Seiten eines Absatzes Ränder festlegen. Der CSS-Code wird sein:

p {

margin-top: 20px;

margin-left: 5px;

margin-right: 10px;

margin-bottom: 15px;

}

Es legt den oberen Margin auf 20 Pixel, den linken Margin auf 5 Pixel, den rechten Margin auf 10 Pixel und den unteren Margin auf 15 Pixel für das Absatzelement fest.

Kurzschrift-Marge

Alternativ können Sie die Kurzschrifteigenschaft „margin“ verwenden, um mehreren oder allen Seiten eines HTML-Elements Werte zuzuweisen. Dadurch können Sie Zeit sparen und Ihren Code kürzer und sauberer halten.

Sie können den Rand mit einem, zwei, drei oder vier Werten festlegen.

• Ein Wert – Durch die Zuweisung eines einzelnen Werts wird derselbe Rand auf alle vier Seiten angewendet. Der folgende Code wendet beispielsweise einen Rand von 20 Pixeln auf alle Seiten eines Absatzes an:

  p {
  
  margin: 20px;
  
  }

• Zwei Werte – Wenn Sie zwei Werte verwenden, wird der erste oben und unten und der zweite rechts und links angewendet.
  Im folgenden Beispiel wird ein Rand von 10 Pixeln an der Ober- und Unterseite und von 5 Pixeln an der rechten und linken Seite festgelegt.

  p {
  
  margin: 10px 5px;
  
  }

• Drei Werte – Bei Verwendung von drei Werten definiert der erste Wert den oberen Rand, der zweite legt den Rand auf der rechten und linken Seite fest und der dritte Wert bestimmt den unteren Rand.
  Der folgende Code legt Ränder von 5 Pixeln auf der Oberseite, 10 Pixeln auf der linken und rechten Seite und 3 Pixeln auf der Unterseite fest.

  p {
  
  margin: 5px 10px 3px;
  
  }

• Vier Werte – Wenn die Randeigenschaft vier Werte hat, werden diese den Seiten in der folgenden Reihenfolge zugewiesen: oben, rechts, unten und links.
  Im folgenden Beispiel beträgt der obere Rand 5 Pixel, der rechte Rand 3 Pixel, der untere Rand 6 Pixel und der linke Rand 2 Pixel.

  p {
  
  margin: 5px 3px 6px 2px;
  
  }

Wie man Padding in CSS hinzufügen kann

Um einem Element in CSS eine Auffüllung hinzuzufügen, verwenden Sie die Eigenschaft „padding“. Ähnlich wie bei Rändern können Sie den Abstand an den vier Seiten eines Elements definieren. Die Größe der Polsterung wird durch drei Arten von Werten definiert.

• Feste Länge – Ein fester Füllwert, meist in Pixel.
• Prozentsatz – Der Wert stellt einen Prozentsatz der Breite des enthaltenden Elements dar.
• Inherit – Das Element erbt die Auffüllung seines übergeordneten Elements.

Wie bei Rändern können Sie den Abstand auf zwei allgemeine Arten zuweisen.

Stellen Sie die Padding individuell für eine Seite ein

Sie können die folgenden Polsterungseigenschaften verwenden, um die Polsterung auf jeder Seite eines Elements festzulegen:

• padding-top – definiert die obere Seitenpolsterung eines Elements.
• padding-right – legt den rechten Seitenabstand eines Elements fest.
• padding-bottom – legt die Polsterung der Unterseite des Elements fest.
• padding-left – definiert den linken Abstand eines Elements.

Unten finden Sie ein Beispiel für CSS-Code, der Auffülleigenschaften enthält.

.element {

padding-top: 20px;

padding-right: 10px;

padding-bottom: 15px;

padding-left: 5px;

}

Der Code legt den Padding für ein Element mit 20 Pixeln oben, 10 Pixeln rechts, 15 Pixeln unten und 5 Pixeln links fest.

Verwenden Sie die Eigenschaft „Padding Shorthand“

Ähnlich wie bei den Rändern können Sie, anstatt den Abstand für jede Seite einzeln festzulegen, die Abkürzungseigenschaft „padding“ verwenden, um den Abstand für mehrere oder alle Seiten anzupassen. Dies führt zu einem saubereren und kürzeren CSS-Code.

Sie können den Abstand mit einem, zwei, drei oder vier Werten festlegen.

• Ein Wert – Durch die Zuweisung eines Werts wird die Polsterung für alle vier Seiten festgelegt. Hier ist ein Beispiel für eine Padding-Eigenschaft mit einem Wert von 20 Pixeln.

  .element {
  
  padding: 20px;
  
  }

• Zwei Werte – Wenn zwei Werte verwendet werden, definiert der erste den Abstand für die Ober- und Unterseite des Elements und der zweite Wert gilt für den linken und rechten Abstand. Zum Beispiel:

  .element {
  
  padding: 20px 10px;
  
  }

• Drei Werte – Wenn Sie drei Werte verwenden, definiert der erste den oberen Abstand, der zweite den linken und rechten Abstand und der dritte den unteren Abstand. Der folgende Code veranschaulicht diesen Fall:

  .element {
  
  padding: 20px 10px 5px;
  
  }

• Vier Werte – Vier Werte definieren den Abstand in der folgenden Reihenfolge: oben, rechts, unten und links. Im folgenden Beispiel wird der Abstand mit einem Wert von 20 Pixeln für die Oberseite, 10 Pixeln für die rechte Seite, 15 Pixeln für die Unterseite und 5 Pixeln für die linke Seite festgelegt.

  .element {
  
  padding: 20px 10px 15px 5px;
  
  }

Wie man Margin und Padding in WordPress hinzufügen kann?

In WordPress definiert das Thema die Margin- und Padding-Eigenschaften aller HTML-Elemente. Sie müssen sie nicht anpassen, wenn Sie mit dem Aussehen Ihrer Website zufrieden sind.

Sie können jedoch das voreingestellte Design überschreiben und die Rand- und Abstandseinstellungen von Ihrem WordPress-Dashboard aus anpassen.

Margin und Padding aus dem vollständigen Site-Editor hinzufügen

Neuere WordPress-Versionen sind mit dem Full Site Editor ausgestattet, mit dem Sie die Einstellungen Ihres Themes über den Gutenberg Page Builder ändern können. Beachten Sie jedoch, dass diese Option nur für blockbasierte Themen wie native WordPress-Themes (wie Twenty Twenty-Two und Twenty Twenty-Three) verfügbar ist.

Um auf den Editor zuzugreifen, öffnen Sie Ihr Dashboard und navigieren Sie zu Design> Website-Editor.

Auf der nächsten Seite, wählen Sie den Abschnitt Templates, um die verfügbaren Seitenvorlagen für Ihr Thema anzuzeigen.

Jetzt können Sie eine der verfügbaren Vorlagen für Ihr Thema auswählen. Nach der Auswahl wird die Vorlagenseite angezeigt.

Klicken Sie auf eines der bestehenden Elemente der Seite, um dessen Abstand und Inhaltsrandeigenschaften zu bearbeiten. WordPress wechselt in den Block-Editor-Modus. Aus dem Menü auf der rechten Seite, wählen Sie Stile (Symbol “Kontrast”). Scrollen Sie nach unten zu Größe, wo Sie Aussenabstand und Innenabstand anpassen können.

Standardmäßig können Sie die Seitenpaare oben-unten und links-rechts bearbeiten, indem Sie die Schieberegler bewegen. Um jede Seite einzeln zu ändern, klicken Sie auf das Symbol für Optionen für Innenabstand oder Optionen für Außenabstand neben dem jeweiligen Eigenschaftsnamen.

Margin und Padding zu zusätzlichem CSS hinzufügen

Wenn Ihr Thema nicht blockbasiert ist, ist die Option Full Site Editor nicht verfügbar. Sie können jedoch benutzerdefinierte Padding- und Margin-Stile aus dem Theme-Customizer hinzufügen.

Um darauf zuzugreifen, öffnen Sie Ihr WordPress-Dashboard und navigieren Sie zu Design. Klicken Sie auf die Schaltfläche Customizer für Ihr aktives Thema oder den Unterabschnitt Customizer in Design.

Auf der Theme-Customizer-Seite, wählen Sie Zusätzliches CSS, wo Sie Ihre Padding- und Margin-Einstellungen hinzufügen können.

Geben Sie den Namen des Elements an, das Sie bearbeiten möchten. Dann schreiben Sie den CSS-Code in das Textfeld auf der linken Seite. Sobald Sie fertig sind, klicken Sie auf die Schaltfläche Veröffentlichen, um die Änderungen zu übernehmen.

Der obige CSS-Code weist allen Seiten einen Abstand von 10 Pixeln, einen Rand von 10 Pixeln der oberen und unteren Seite und einen Rand von 5 Pixeln der linken und rechten Seite des Elements namens .my-paragraph zu.

Praktische Anwendungen von Margin und Padding

Margin und Padding werden im Webdesign auf vielfältige Weise eingesetzt. Sie helfen Ihnen:

• Passen Sie den Leerraum in Ihrem Design an;
• eine visuelle Trennung zwischen den Elementen erstellen;
• die Lesbarkeit und den Fluss von Inhalten verbessern.

Zum Beispiel kann das Hinzufügen von Padding um Text das Lesen erleichtern. Auf der anderen Seite kann das Hinzufügen eines Randes zwischen Bildern verhindern, dass sie überladen erscheinen. Diese Eigenschaften sind auch wichtig, wenn Sie Responsive Design für Ihre Website erstellen, um sicherzustellen, dass das Layout auf allen Bildschirmgrößen gut aussieht.

Fortgeschrittene Techniken erkunden

Es gibt viele fortgeschrittene Techniken zur Verwendung von Rändern und Polsterungen. Zu den häufigsten gehören:

• Prozentwerte verwenden – Durch die Verwendung eines Prozentwerts für einen Rand oder eine Auffüllung wird ein Abstand erstellt, der einem Prozentsatz der Breite des enthaltenden Elements entspricht. Dies kann nützlich sein, um responsive Designs zu erstellen, die sich an die Bildschirmgröße anpassen.
• Negative Werte verwenden – Negative Werte können für Ränder verwendet werden, um interessante Effekte wie überlappende Elemente zu erzeugen. Beachten Sie jedoch, dass beim Auffüllen keine negativen Werte zulässig sind.
• Auto Margins verwenden – Auto Margins helfen dabei, ein Element horizontal in seinem Container zu zentrieren. Wenn sowohl der linke als auch der rechte Rand auf margin auto eingestellt sind und das Element eine bestimmte Breite hat, teilt der Browser den verbleibenden Platz links und rechts gleichmäßig auf und zentriert das Element effektiv.

Best Practices für die Verwendung von Margin und Padding

Es ist wichtig, beim Anbringen von Margin und Padding die Best Practices einzuhalten.

• Halten Sie sich an einen einheitlichen Maßstab für Ihre Abstände, um ein einheitliches Design zu gewährleisten.
• Vermeiden Sie die Verwendung willkürlicher Werte und legen Sie stattdessen eine Standardabstandsskala fest, die Sie in Ihrem gesamten Design verwenden können.
• Berücksichtigen Sie die Auswirkungen von Rand und Abstand auf das Reaktionsverhalten Ihres Designs. Testen Sie Ihr Layout auf verschiedenen Bildschirmgrößen, um sicherzustellen, dass die Abstände auf allen Geräten gut aussehen.
• Verstehen Sie, wie ein Margenkollaps funktioniert und wie Sie ihn bei Bedarf verhindern können. Beispielsweise können Sie dem übergeordneten Element einen Rahmen oder eine Polsterung hinzufügen, um zu verhindern, dass der Rand zusammenbricht.
• Verwenden Sie Kurzeigenschaften, um den Rand und den Abstand für alle vier Seiten eines Elements in einer Deklaration festzulegen.
• Verwenden Sie Browser-Entwicklertools, um Elemente zu überprüfen und zu sehen, wie Ränder und Abstände angewendet werden. Dies kann Ihnen bei der Behebung von Layoutproblemen helfen.

Häufige Fehler, die es zu vermeiden gilt

Wann immer Sie beginnen, sich auf ein neues Unterfangen einzulassen, können Fehler passieren, die Sie jedoch nicht entmutigen sollten. Sie können jedoch aus den Erfahrungen anderer lernen, um einige der häufigsten Probleme zu vermeiden.

• Das CSS-Box-Modell ignorieren – Das Verständnis des CSS-Box-Modells ist entscheidend, um Fehlberechnungen bei Layoutabmessungen zu vermeiden. Denken Sie daran, dass die Gesamtbreite und -höhe eines Elements die Summe aus Inhalt, Abstand, Rahmen und Rand ist.
• Margin und Padding austauschbar verwenden – Denken Sie immer daran, dass Marge andere Elemente wegschiebt, während Padding einen Abstand zwischen dem Inhalt des Elements und seinem Rand festlegt. Eine Verwechslung kann das Layout Ihrer Webseite beeinträchtigen.
• Reduzierende Margins ignorieren – Ein Margin-Kollaps tritt auf, wenn vertikal gestapelte Elemente ohne Rahmen unterschiedliche Margins haben. Vermeiden Sie die Verwendung unterschiedlicher Margins für Elemente, um unbeabsichtigte Überlappungen zwischen ihnen zu verhindern.
  

  

• Absolute Einheiten für responsives Design verwenden – Die Verwendung von Pixeln (px) für Rand und Innenabstand kann dazu führen, dass Ihr Design weniger responsiv ist. Oft ist es besser, relative Einheiten wie Prozentsätze (%), Ansichtsfensterhöhe (vh), Ansichtsfensterbreite (vw) oder zu verwenden ems (em).
• Nicht auf mehreren Geräten testen – Inkonsistentes Design auf unterschiedlichen Bildschirmgrößen resultiert oft daraus, dass Sie Ihre Änderungen nicht auf verschiedenen Geräten testen.

Schlussfolgerung

Rand und Abstand sind leistungsstarke Werkzeuge im Webdesign. Sie steuern die Abstände in Ihrem Layout, was sich erheblich auf die Benutzerfreundlichkeit und Ästhetik Ihrer Website auswirken kann.

Indem Sie ihre Unterschiede und geeigneten Anwendungsfälle verstehen, können Sie Layouts erstellen, die optisch ansprechend, einfach zu navigieren und effektiv bei der Kommunikation Ihrer Inhalte sind.

FAQs

Können sowohl Margin als auch Padding negative Werte annehmen?

Sie können negative Werte für Margins festlegen, um einen überlappenden Effekt zu erzeugen. Allerdings kann Padding keine negativen Werte annehmen.

Nehmt der Padding oder der Margin die Hintergrundfarbe an?

Padding kann die Farbe des übergeordneten Elements annehmen, während Margin keine Farben annehmen kann. Beide Eigenschaften erzeugen einen unsichtbaren Raum, aber wenn das übergeordnete Element eine Hintergrundfarbe hat, erbt der Abstandsraum diese. Der Randraum bleibt jedoch immer unsichtbar.

Sind Padding und Margin austauschbar?

Nein. Während sowohl der Margin als auch der Padding den Platz auf Webseiten steuern, haben sie unterschiedliche Auswirkungen.

• Padding bestimmt den Abstand zwischen dem Inhalt und den Rändern des enthaltenden Elements.
• Margin steuert den Abstand zwischen einem Element und anderen Elementen.