Zum Inhalt springen

margin

  • Redaktion 
  • Zuletzt aktualisiert am

#margin

Kurzschreibweise für margin-top margin-right margin-bottom und margin-left.

default margin: 0;

Entfernt alle Ränder.

margin: 30px;

Bei Verwendung des Wertes 1 wird der Rand für alle 4 Seiten festgelegt.

margin: 30px 60px;

Bei Verwendung von 2 Werten:

  • der erste Wert ist für oben/unten
  • der zweite Wert steht für rechts/links

Um sich die Reihenfolge zu merken, denke an die Werte, die du nicht definiert hast.

Wenn Sie 2 Werte eingeben (oben/rechts), verwerfen Sie die Einstellung unten und links. Da bottom das vertikale Gegenstück zu top ist, wird der Wert von top verwendet. Und weil links das horizontale Gegenstück zu rechts ist, wird der Wert von rechts verwendet.

margin: 30px 60px 45px;

Bei Verwendung von 3 Werten:

  • der erste Wert ist für oben
  • der zweite Wert steht für rechts/links
  • der dritte Wert steht für unten

Um sich die Reihenfolge zu merken, denke an die Werte, die du nicht definiert hast.

Wenn du 3 Werte eingibst (oben/rechts/unten), lässt du die Einstellung links weg. Als Gegenstück zu rechts wird dessen Wert verwendet.

margin: 30px 60px 45px 85px;

Bei Verwendung von 4 Werten:

  • der erste Wert ist für oben
  • der zweite Wert steht für rechts
  • der dritte Wert steht für unten
  • der vierte Wert steht für links

Um sich die Reihenfolge zu merken, fange bei oben an und gehe im Uhrzeigersinn.