Der Hauptunterschied zwischen Margin und Padding besteht darin, wo sie im Layout eines Elements wirken:
- Margin (Außenabstand):
- Der Margin definiert den Abstand zwischen den äußeren Kanten eines Elements und den benachbarten Elementen.
- Es erzeugt Raum außerhalb des Rahmens eines Elements.
- Margin wirkt sich also darauf aus, wie sich Elemente relativ zueinander im Layout positionieren.
- Ein positiver Marginwert erzeugt Abstand, während ein negativer Marginwert Elemente näher zusammenrücken lässt.
- Padding (Innenabstand):
- Das Padding ist der Raum zwischen dem Inhalt eines Elements und dessen Rahmen.
- Es beeinflusst den Raum innerhalb des Rahmens eines Elements.
- Padding wird verwendet, um den Abstand zwischen dem Inhalt eines Elements und dessen Rahmen zu steuern.
- Es beeinflusst nicht die Positionierung benachbarter Elemente.
In einfachen Worten: Margin bestimmt den Abstand zwischen Elementen, während Padding den Abstand zwischen dem Inhalt eines Elements und seinem Rahmen definiert.
.container {
background-color: lightgray;
border: 2px solid darkgray;
margin: 20px; /* Außenabstand um den Container */
}
.box {
background-color: skyblue;
border: 1px solid blue;
padding: 15px; /* Innenabstand innerhalb der Box */
}
Beschreibung
In diesem Beispiel hat der Container eine Margin von 20px, was bedeutet, dass es einen Abstand von 20px zwischen dem Container und anderen Elementen gibt. Die Box hat ein Padding von 15px, was bedeutet, dass es einen Abstand von 15px zwischen dem Inhalt der Box und ihrem Rahmen gibt.
Das Ergebnis wird sein, dass der Container einen Abstand von 20px zu anderen Elementen hat, während die Box einen Innenabstand von 15px um ihren Inhalt hat, der vom Rahmen getrennt ist.
Anderes Beispiel-Video ( 2 min)