Margin vs Padding der vergleich

Padding und Margin definieren beides Abstände für ein spezielles Element. Padding definiert den Abstand zwischen Element und Border. Margin definiert den Abstand zwischen Border und anderen Elementen. Als ich mit CSS angefangen habe, habe ich sie oft verwechselt und war nie genau sicher welches der Beiden ich verwenden soll. In diesen Artikel schreibe ich deshalb auf nach welchen Regeln ich entscheide ob ich margin oder padding verwende.

Okay aber wo beginnen wir damit.

Als erstes Sprechen wir hier zuerst über das Box-Model. Direkt hier in der Abbildung können wir das Box Model sehen.
Margin
Border
Padding
Content

Wir haben ganz innen den Content, d.h. unseren Text oder auch andere Elemente. Und jetzt kommt der spannende erste Teil, Padding. Padding definiert den Abstand zwischen content und einer Border. Margin wiederrum definert denn Abstand zwischen Border und anderen content. Was mache ich jetzt aber wenn es keine border in meinen Design gibt ??? Nehm ich da jetzt Padding oder Margin. Die Antwort ist relative simple, selbst wenn euer Design keine border hat könnt ihr einfach überlegen, aber wenn es ein border gäbe wo wäre sie? Lasst uns das mal gemeinsam an einen Element machen.