CSS Grundlagen: Margin leicht erklärt – Wie du den äußeren Abstand für HTML-Elemente festlegst

English

CSS Eigenschaft Margin – Außenabstand

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

margin-top Abstand nach oben
margin-right Abstand nach rechts
margin-bottom Abstand nach unten
margin-left Abstand nach links
Margin - Außenabstand
Außenabstand – margin

CSS-Eigenschaft: Margin

Beschreibung mögliche Werte Standardwert Kategorie
Außenabstand (Margin) Länge in px oder em
Prozent
auto
initial
inherit		 0 Box-Modell
Abstände

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

Beachte:

  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.

Beispiel CSS 
/* 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;
}
Beispiel HTML 
<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>
Ausgabe des HTML-Codes

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.

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