mozilla
Ihre Suchergebnisse

    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

    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

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
    Mitwirkende an dieser Seite: SJW, fscholz, Michael2402, Jürgen Jeka, Yuichiro
    Zuletzt aktualisiert von: fscholz,
    Seitenleiste ausblenden