Neueste Web-Entwicklung Tutorials
 

Style margin Property

<Style - Objekt

Beispiel

Stellen Sie alle vier Ränder eines <div> Element:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Versuch es selber "

Definition und Verwendung

Die Randeigenschaftssätze oder gibt den Rändern eines Elements.

Diese Eigenschaft kann von einem bis vier Werte annehmen:

  • Ein Wert, wie: div {margin: 50px} - alle vier Ränder werden 50px
  • Zwei Werte, wie zB: div {margin: 50px 10px} - die oberen und unteren Rand wird 50px sein, linken und rechten Rand wird 10px
  • Drei Werte, wie zB: div {margin: 50px 10px 20px} - der obere Rand 50px sein wird, linke und rechte Rand wird 10px wird unteren Rand sein 20px
  • Vier Werte, wie zB: div {margin: 50px 10px 20px 30px} - der obere Rand 50px sein wird, wird rechtser Rand 10px sein wird unterer Rand 20px sein, linker Rand wird 30px

Sowohl die Rand-Eigenschaft und die Eigenschaft padding Einlegeraum um ein Element. Jedoch ist der Unterschied, dass Rand den Raum um den Rand einfügt, während padding den Raum innerhalb der Grenze eines Elements einfügt.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Die Marge Eigenschaft wird in allen gängigen Browsern unterstützt.

Syntax

Bringen Sie die Eigenschaft margin:

object .style.margin

Stellen Sie die Eigenschaft margin:

object .style.margin=" Eigenschaftswerte
Wert Beschreibung
% Definiert die Ränder in% der Breite des Mutterelements
length Definiert die Margen in Längeneinheiten
auto Der Browser setzt die Ränder (all four margins will be equal)
initial Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfang
inherit Erbt diese Eigenschaft von seinem übergeordneten Elemente. Lesen Sie mehr über erben

Technische Details

Standardwert: 0
Rückgabewert: Ein String, die die Ränder eines Elements
CSS Version CSS1

Mehr Beispiele

Beispiel

Ändern Sie alle vier Ränder eines <div> Element "25px" :

document.getElementById("myDiv").style.margin = "25px";
Versuch es selber "

Beispiel

Bringen Sie die Ränder eines <div> Element:

alert(document.getElementById("myDiv").style.margin);
Versuch es selber "

Beispiel

Differenz zwischen der Eigenschaft margin und der Eigenschaft padding:

function changeMargin() {
    document.getElementById("myDiv").style.margin = "100px";
}

function changePadding() {
    document.getElementById("myDiv2").style.padding = "100px";
}
Versuch es selber "

Verwandte Seiten

CSS Tutorial: CSS Margin

CSS - Referenz: margin property

<Style - Objekt