margin

Übersicht

Die margin Eigenschaft ist eine Kurzform für die Außenabstände aller vier Seiten eines Elements.

• Standardwert: 0
• Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
• Vererbbar: Nein
• Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
• Medium: visuell
• berechneter Wert: siehe einzelne Eigenschaften

Syntax

margin: <Längenwert>{1,4} | <Prozentzahl>{1,4} | inherit | auto

Werte

Es werden bis zu vier der folgenden Werte akzeptiert:

<Längenangabe>

Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

<Prozentzahl>

Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

auto

auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.
Bei div { width:50%; margin:0 auto; } wird das div Element horizontal zentriert.

inherit

Der Wert des Elternelements wird geerbt.

Ein Wert

Gilt für alle vier Seiten.

Zwei Werte

Der erste Wert bestimmt die oberen und unteren Abstände, der zweite Wert legt die Abstände rechts und links fest.

Drei Werte

Der erste Wert bestimmt den oberen Abstand, der zweite Wert legt die Abstände für rechts und links zusammen fest und der dritte Wert bestimmt den unteren Abstand.

Vier Werte

Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.

Beispiele

margin: 5%;                /* 5% Abstand auf allen Seiten */

margin: 10px;              /* 10px Abstand auf allen Seiten */

margin: 1.6em 20px;        /* 1.6em Abstand für oben und unten, 20px Abstand für rechts und links */

margin: 10px 3% 1em;       /* oben 10px, links und rechts 3%, unten 1em */

margin: 10px 3px 30px 5px; /* oben 10px, rechts 3px, unten 30px, links 5px */

margin: 1em auto;          /* 1em Abstand oben und unten; die Box wird horizontal zentriert */

margin: auto;              /* Die Box wird horizontal zentriert, kein Abstand (0) oben und unten */

margin:     auto;
background: gold;
width:      66%;

margin:     -1em 0 100px -40px;
background: plum;
width:      20em

Browser Kompatibilität

Spezifikation

• CSS 2.1 Visual formatting #margin

Siehe auch

• margin-top, margin-right, margin-bottom, margin-left
• -moz-margin-start, -moz-margin-end
• padding