--- title: margin slug: Web/CSS/margin tags: - CSS - CSS Referenz translation_of: Web/CSS/margin translation_of_original: Web/CSS/margin-new ---

{{ CSSRef() }}

Übersicht

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

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

Browser ab Version auto Wert
Internet Explorer 3.0 6.0 (strict mode)
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0)
Opera 3.5 3.5
Safari (WebKit) 1.0 (85) 1.0 (85)

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/margin", "ja": "ja/CSS/margin" } ) }}