CSS- Margin -Eigenschaft
Beispiel
Stellen Sie den Rand für alle vier Seiten eines <p>-Elements auf 35 Pixel ein:
p {
margin: 35px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die margin
Eigenschaft legt die Ränder für ein Element fest und ist eine abgekürzte Eigenschaft für die folgenden Eigenschaften:
Wenn die Randeigenschaft vier Werte hat:
- Rand: 10px 5px 15px 20px;
- Der obere Rand beträgt 10 Pixel
- der rechte Rand ist 5px
- Der untere Rand beträgt 15 Pixel
- linker Rand ist 20px
Wenn die Randeigenschaft drei Werte hat:
- Rand: 10px 5px 15px;
- Der obere Rand beträgt 10 Pixel
- rechter und linker Rand sind 5px
- Der untere Rand beträgt 15 Pixel
Wenn die Randeigenschaft zwei Werte hat:
- Rand: 10px 5px;
- Der obere und untere Rand beträgt 10 Pixel
- rechter und linker Rand sind 5px
Wenn die Randeigenschaft einen Wert hat:
- Rand: 10px;
- Alle vier Ränder sind 10 Pixel groß
Hinweis: Negative Werte sind zulässig.
Standardwert: | 0 |
---|---|
Vererbt: | Nein |
Animierbar: | Ja, siehe einzelne Eigenschaften . Lesen Sie mehr über animierbare |
Ausführung: | CSS1 |
JavaScript-Syntax: | Objekt .style.margin="100px 50px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS-Syntax
margin: length|auto|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Zusammenbruch der Marge
Die oberen und unteren Ränder von Elementen werden manchmal zu einem einzigen Rand zusammengefasst, der dem größten der beiden Ränder entspricht.
Dies passiert nicht an horizontalen (linken und rechten) Rändern! Nur vertikale (obere und untere) Ränder!
Sehen Sie sich das folgende Beispiel an:
Beispiel
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
Im obigen Beispiel hat das Element <p class="a"> einen oberen und unteren Rand von 30 Pixel. Das Element <p class="b"> hat einen oberen und unteren Rand von 20 Pixel.
Das bedeutet, dass der vertikale Rand zwischen <p class="a"> und <p class="b"> 50 Pixel (30 Pixel + 20 Pixel) betragen sollte. Aufgrund des Zusammenbruchs der Margen beträgt die tatsächliche Marge jedoch 30 Pixel!
Mehr Beispiele
Beispiel
Stellen Sie den Rand für ein <p>-Element auf 35 Pixel für oben und unten und auf 70 Pixel für rechts und links ein:
p {
margin: 35px 70px;
}
Beispiel
Stellen Sie den Rand für ein <p>-Element auf 35 Pixel für oben, 70 Pixel für rechts und links und auf 50 Pixel für unten ein:
p {
margin: 35px 70px 50px;
}
Beispiel
Stellen Sie den Rand für ein <p>-Element auf 35 Pixel für oben, 70 Pixel für rechts, 50 Pixel für unten und 90 Pixel für links ein:
p {
margin: 35px 70px 50px 90px;
}
Verwandte Seiten
CSS-Tutorial: CSS-Rand
CSS-Tutorial: CSS-Box-Modell
HTML-DOM-Referenz: Margin-Eigenschaft