Padding, Margin, Border – was ist der Unterschied?

Padding, margin, border… What?!

Ich weiss noch, wie ich mir Fresszettel an meinen Mac klebte. Nur so konnte ich mir den Unterschied zwischen padding und margin merken 😂.

Gerade bei Page- oder Website-Builders, z.B. meinem allerliebsten "WPBakery Page Builder" _Affiiatelink, aber auch bei Newsletter-Tools wie z.B. Active-Campaign _{Affiliatelink} werden diese Eigenschaften regelmässig benötigt. In diesem Artikel habe ich die verschiedenen Eigenschaften versucht so einfach wie möglich zu erklären, damit du dir ab jetzt deinen Kopf nicht mehr zerbrechen musst.

Let’s go!

Padding, Margin, Border – in einer Grafik erklärt

Zur Veranschaulichung stell dir bitte vor, dass jedes Element deiner Website, also z.B. Text, ein Bild, ein Button, ein Icon, usw., aus jeweils einem Block, ein sogenannter "Container" besteht.

Padding

Mit padding wird der erzwungene Innenabstand (padding = engl.: Polsterung) zwischen dem Inhalt (im oberen Beispiel das weisse Quadrat) und seiner eigenen Grenze (border) gemeint. Wäre kein padding da, würde der Text direkt am border "kleben".

Für jede Richtung einen padding-Wert

Wenn es nur eine Einstellung gibt, dann kannst du davon ausgehen, dass der Wert für alle "Richtungen" gleichermassen zählt. Hast du hingegen die Option, verschiedene Werte einzutragen, gibt es:

• padding-top (oberer Abstand)
• padding-right (rechter Abstand)
• padding-bottom (unterer Abstand)
• padding-left (linker Abstand)

Meist eignen sich hier prozentuale Angaben (%) besser als statische Angaben wie z.B. px (Pixel), damit auf allen Endgeräten (von PC bis Smartphone) das Ergebnis responsive bleibt.

Border

Unter border versteht man die Elementgrenze. Im Beispiel unten siehst du den border-Wert als Rahmen um den "Button". Wenn beim border kein Wert definiert wird, sieht man ihn auch nicht (es gäbe dann keinen Rand, sondern wäre einfach pink).

Damit man ihn sieht, musst du zusätzlich zum eigentlichen Wert wie z.B. 1px, auch den Stil definieren. Folgende Stile gibt es:

Zusätzlich hast du bei border die Möglichkeit einen Rahmenradius zu vergeben. In der Grafik siehst du, was die verschiedenen Werte, angefangen bei 5px aufsteigend bis zu 35px, für eine Auswirkung haben. Die Ecken des borders werden also abgerundet.

Für jede Seite einen border-Wert

Wenn es nur eine Einstellung gibt, dann kannst du auch hier davon ausgehen, dass der Wert für alle "Seiten" gleichermassen zählt. Hast du hingegen die Option, verschiedene Werte einzutragen, gibt es:

• border-top (oberer Rahmen)
• border-right (rechter Rahmen)
• border-bottom (unterer Rahmen)
• border-left (linker Rahmen)

Hier eignen sich meist statische Angaben wie z.B. px (Pixel). Hierbei ist 1px das Minimum was definiert werden muss, damit der Rahmen sichtbar wird.

Margin

Mit Margin (Spanne, Marge) bezeichnet man den Aussenabstand eines Elements. Also der erzwungene Leerraum zwischen dem aktuellen Element und seinem übergeordneten Elternelement bzw. seinen Nachbarelementen.

Die margin Eigenschaft ist immer transparent. Du kannst sie also nicht gestalten, sie dient lediglich dem Layout. Du kannst mit negativen Werten wie -50px auch Überlappungen der Elemente erreichen, wobei hier dann auch der z-index eine Rolle spielt, worauf ich in diesem Artikel nicht eingehe.

Für jede Seite einen margin-Wert

Wenn es nur eine Einstellung gibt, dann kannst du hier ebenfalls davon ausgehen, dass der Wert für alle "Seiten" gleichermassen zählt. Hast du hingegen die Option, verschiedene Werte einzutragen, gibt es:

• margin-top (oberer Aussenabstand)
• margin-right (rechter Aussenabstand)
• margin-bottom (unterer Aussenabstand)
• margin-left (linker Aussenabstand)

Hier eignen sich numerische Angaben wie z.B. px (Pixel) am besten. Wie bereits oben schon erwähnt, kannst du aber auch negative Werte mit einem "-" davor, also z.B. -20px, verwenden um den Aussenabstand zu verringern und so ggf. eine Überlappung von Elementen zu erreichen.

Zusammenfassung

Padding = Erzwungener Innenabstand bis zur eigenen Elementgrenze. Prozentuale (%) Angaben meist besser geeignet.

Border = Elementgrenze. Nur sichtbar, wenn zusätzlich ein Stil definiert wird und ein numerischer Wert (px). Mit einem Radiuswert können die Ecken abgerundet werden.

Margin = Erzwungener Aussenabstand bis zum nächsten Element. Hier können auch negative Werte (-50px) verwendet werden, um den Abstand zu verringern.

Natürlich gäbe es hier noch einiges mehr zu schreiben. Da ich mich mit diesem Blogartikel aber an Solopreneurinnen richte und nicht an Webdesignerinnen ;-), halte ich es so einfach wie möglich. Für die meisten Situationen in der täglichen Arbeit mit deiner Website sollten diese Angaben ausreichen.

A presto!

Deine Mary