CSS Grundlagen: Margin – Eine einfache Anleitung für Einsteiger, um den Außenabstand zu setzen

Mit der CSS-Eigenschaft margin wird der Außenabstand (bzw. Rand) eines Elements zu seinem Eltern- bzw. seinen direkten Nachbar-Elementen bestimmt.

Die Eigenschaft margin ist die Kurzschreibweise für die vier CSS-Eigenschaften

Die Angabe in oranger Schrift ist die Standardanwendung dieser CSS-Eigenschaft.

1. Margin kann für alle vier Seiten (top, right, bottom, left) individuell konfiguriert werden. Meist wird der Außenabstand in px, em oder Prozent definiert. Der durch Margin erzeugte Raum wird Weißraum bzw. Leerraum genannt.

2. Für Margin können 1, 2, 3 oder 4 Werte angegeben werden.

   • ein Wert
     Der Wert gilt für alle vier Seiten.

   • zwei Werte
     Der erste Wert gilt für margin-top (oben) und margin-bottom (unten)
     der zweite Wert gilt für margin-right (rechts) und margin-left (links).

   • drei Werte
     Der erste Wert gilt für margin-top (oben)
     der zweite Wert gilt für margin-right (rechts) und margin-left (links),
     der dritte Wert gilt für margin-bottom (unten).

   • vier Werte
     Der erste Wert gilt für margin-top (oben),
     die anderen Werte folgen im Uhrzeigersinn, d.h.
     der zweite Wert gilt für margin-right (rechts),
     der dritte Wert gilt für margin-bottom (unten) und
     der vierte Wert gilt für margin-left (links).

3. Der Außenabstand wirkt sich nicht auf die Breite bzw. Höhe des HTML-Elements aus. Aber der gesamte Platzbedarf ist die Breite des Elements zuzüglich Margin.

4. Negative Werte für Margin sind zulässig, aber meist nicht sinnvoll.

/* Bereich definieren */
div {
  /* Außenabstand: 1em vertikal, 2em horizontal */
  margin: 1em 2em;

  /* Hintergrund: antiqueWhite */
  background: #faebd7;

  /* Rahmen: Gold */
  border: 0.0625em solid #ffd700;
}


/* Absatz definieren */
p {
  /* Außenabstand: 1em vertikal, 2em horizontal */
  margin: 1em 2em;

  /* Innenabstand: oben 1.5em, unten 3em */
  /*               links 2em, rechts 4em */
  padding: 1.5em 4em 3em 2em;

  /* Hintergrund: paleSpring */
  background: #dfdfbc;

  /* Schriftfarbe: darkGrey */
  color: #404040;

  /* Rahmen: darkRed */
  border: 0.0625em solid #dd0000;
}

<div>
<p>Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die für alle Browser geeignet ist. Die Seite ist genauso gut zum Drucken oder für die Darstellung auf einem Smartphone geeignet ist. Wohlgemerkt: es reicht eine für alle Browser und alle Geräte.</p>
</div>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.