Aussenabstand#

Die margin Eigenschaften legt den Außenabstand fest. Der Außenabstand bezeichnet den Abstand zwischen benachbarten Elementen.

Eigenschaftswert	Erklärung
margin	Außenabstand wird für alle vier Bereiche des Elementes - oben (top), rechts (right), unten (bottom) und links (left) - in Pixel angegeben. Wird ein Wert angegeben, gilt das margin für alle 4 Seiten. Werden zwei Werte angegeben, gilt der erste Wert für top und bottom, der zweite für left und right. Werden drei Werte angegeben, gilt der erste Wert für top, der zweite Wert für left und right und der dritte Wert für bottom. Alle vier Werte stehen für top. right, bottom und left
margin-top	Der Wert wirkt sich nur auf den Außenabstand oben aus.
margin-right	Der Wert wirkt sich nur auf den Außenabstand rechts aus.
margin-bottom	Der Wert wirkt sich nur auf den Außenabstand unten aus.
margin-left	Der Wert wirkt sich nur auf den Außenabstand links aus.

.box {
  margin: 25px;
}

.box2 {
  margin: 115px 33px 12px 33px;
}

.box3 {
  margin-top: 225px;
  margin-right: 45px;
  margin-bottom: 25px;
  margin-left: 45px;
}

See the Pen margin1 by csswebsite (@csswebsite) on CodePen.

See the Pen margin2 by csswebsite (@csswebsite) on CodePen.

Margin Collapse#

Die top und bottom margins von Elementen können sich überlappen und bilden nur einen gemeinsamen Außenabstand. Die Größe des Außenabstand wird dann vom größeren margin bestimmt oder bei Gleichheit wird einer der Beiden ausgewählt.

.box1 {
  background-color: aqua;
  margin-top: 32px;
  margin-bottom: 32px;
}

.box2 {
  background-color: gold;
  margin-top: 32px;
  margin-bottom: 32px;
}

See the Pen margin3 by csswebsite (@csswebsite) on CodePen.

Mehr dazu auf Mastering margin collapsing