Style marginEigenschaft

Style 对象参考手册Style-Objekt

Definition und Verwendung

Die margin-Eigenschaft legt die Außenabstände eines Elements fest oder gibt sie zurück.

Diese Eigenschaft kann 1 bis 4 Werte annehmen:

  • Wenn ein Wert angegeben wird, wie: div {margin: 50px} - alle vier Außenabstände sind 50px.
  • Wenn zwei Werte angegeben werden, wie: div {margin: 50px 10px} - sind die Außenabstände oben und unten 50px und die Außenabstände links und rechts 10px.
  • Wenn drei Werte angegeben werden, wie: div {margin: 50px 10px 20px} - ist der obere Außenabstand 50px, sind die Außenabstände links und rechts 10px und ist der untere Außenabstand 20px.
  • Wenn vier Werte angegeben werden, wie: div {margin: 50px 10px 20px 30px} - ist der obere Außenabstand 50px, der rechte Außenabstand 10px, der untere Außenabstand 20px und der linke Außenabstand 30px.

Syntax

Festlegen der margin-Eigenschaft:

Object.style.margin="%|length|auto|inherit"

Zurückgeben der margin-Eigenschaft:

Object.style.margin

Wert Beschreibung
% Definiert einen prozentualen Außenabstand basierend auf der Breite des Elternelements.
length Definiert die Breite der Außenabstände unter Verwendung von Einheiten wie px, cm usw.
auto Die vom Browser festgelegten Außenabstände (alle vier Außenabstände sind gleich).
inherit Die Außenabstände werden vom Elternelement geerbt.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Alle wichtigen Browser unterstützen die margin-Eigenschaft.

Hinweis:IE7 und frühere Versionen unterstützen den Wert "inherit" nicht. IE8 unterstützt "inherit" nur, wenn ein !DOCTYPE angegeben ist. IE9 unterstützt "inherit".

Tipps und Hinweise

Die margin-Eigenschaft und die padding-Eigenschaft fügen beide Abstand um ein Element ein. Der Unterschied besteht jedoch darin, dass margin Abstand außerhalb des Rahmens einfügt, während padding Abstand innerhalb des Rahmens des Elements einfügt.

Beispiele

Beispiele

Ändern Sie die Außenabstände eines div-Elements:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<style type="text/css">
div{
    border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
    document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
    document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>

<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="changeMargin()">Ändern Sie die Außenabstände des div-Elements</button>
<br>
<br>
<div id="ex2">Dies ist etwas Text.</div>
<br>
<button type="button" onclick="changePadding()">Ändern Sie den Innenabstand des div-Elements</button>

</body>
</html>

Selbst ausprobieren »

Style 对象参考手册Style-Objekt Andere Erweiterungen