Der Außenabstand
Die Außenabstände (margin) werden durch die margin-box festgelegt. Sie bilden die äußerste Schicht des Box-Modells. Wenn keine Außenabstände angegeben sind, ist die Kante der margin-box identisch mit der des Rahmens.
Mit margin: 30px
Ein gleichmäßiger Außenabstand von 30 Pixel auf allen vier Seiten.
Ergebnis
Dieser Text ist mit einem Außenabstand von margin: 30px formatiert.
p { border: 2px solid magenta;
margin: 30px; }Mit margin-left: 100px
Nur der linke Außenabstand wird auf 100 Pixel gesetzt.
Ergebnis
Dieser Text ist mit einem linken Außenabstand von margin-left: 100px formatiert.
p { border: 2px solid magenta;
margin-left: 100px; }Mit padding: 20px und margin-top: 60px
Kombination aus Innen- und Außenabstand.
Ergebnis
Dieser Text ist mit einem Innenabstand von padding: 20px und einem oberen Außenabstand von margin-top: 60px formatiert.
p { border: 2px solid magenta;
padding: 20px;
margin-top: 60px; }