Wiki

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!

Durchschnittliche Lesedauer: 4 Minuten

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 = Innenabstand, Margin = Aussenabstand, Border = Elementgrenze

 

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".

 

Beispielbild zur Veranschaulichung von einem Textfeld mit padding und einem ohne

 

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).

 

Inhalt, Padding, Border, Margin

 

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

 

Die verschiedenen border "Stile"

 

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.

 

Vier Beispiele mit unterschiedlichen border radius Werten

 

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.

 

Einmal mit Margin und einmal ohne

 

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.

Hast du noch Fragen zu den Eigenschaften von padding, margin und border? Lass es mich in den Kommentaren wissen und teile diesen Beitrag gerne auf Social Media.

A presto!

Deine Mary

Motiviert dein Online-Business so richtig nach vorne in die Sichtbarkeit zu bringen?

Dann melde dich jetzt für meine kostenlose "Hack Your Business"-Academy #4free an!

Mary Mattiolo Autorbox

Wer schreibt denn hier?

Hey! Schön, dass du meinen Blog liest ✨!

Ich bin Mary Mattiolo, Brand- und Webdesignerin für Expertinnen. Ich helfe Solopreneurinnen ihr Business nach vorne zu bringen, damit sie von ihren Wunschkunden gefunden werden.

Neben meinen 1:1 Angeboten findest du bei mir konkrete und leicht umsetzbare Tipps, wie du dein Online-Business startest, ausbaust und schlussendlich einen Grossteil davon automatisierst.

Mein Motto: 🎩 Break the rules but first know em! #HackYourBusinessAndFreeYourLife

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nie veröffentlicht. Alle Angaben sind freiwillig.

Kommentieren