CSS-Eigenschaften: Margin – Außenabstand festlegen

Außenabstand: CSS Property margin

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
Anzeige

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 dieser CSS-Eigenschaft.

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 oben (margin-top) und unten (margin-bottom),
      der zweite Wert gilt für rechts (margin-right) und links (margin-left).

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

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

  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.

Anzeige
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.

Anzeige