Style marginBottomEigenschaft
Style-Objekt
Definition und Verwendung
Die Eigenschaft marginBottom legt den unteren Außenabstand eines Elements fest oder gibt ihn zurück.
Syntax
Eigenschaft marginBottom festlegen:
Object.style.marginBottom="%|length|auto|inherit"
Eigenschaft marginBottom zurückgeben:
Object.style.marginBottom
| Wert | Beschreibung |
|---|---|
| % | Definiert den unteren Außenabstand als Prozentsatz basierend auf der Breite des Elternelements. |
| length | Definiert die Breite des unteren Außenabstands mithilfe von Einheiten wie px, cm usw. |
| auto | Der vom Browser festgelegte untere Außenabstand. |
| inherit | Der untere Außenabstand wird vom Elternelement geerbt. |
Browser-Unterstützung
Alle wichtigen Browser unterstützen die marginBottom-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
Sowohl die Eigenschaften margin als auch padding fügen Abstand um ein Element herum 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.
Beispiel
Beispiel
Ändern Sie den unteren Außenabstand eines div-Elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginBottom="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingBottom="100px";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="changeMargin()">Ändern Sie den unteren Außenabstand des div-Elements</button>
<br>
<br>
<div id="ex2">Dies ist etwas Text.</div>
<br>
<button type="button" onclick="changePadding()">Ändern Sie den unteren Innenabstand des div-Elements</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial(example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginBottom="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingBottom="100px";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="changeMargin()">Ändern Sie den unteren Außenabstand des div-Elements</button>
<br>
<br>
<div id="ex2">Dies ist etwas Text.</div>
<br>
<button type="button" onclick="changePadding()">Ändern Sie den unteren Innenabstand des div-Elements</button>
</body>
</html>
Selbst ausprobieren »
Style-Objekt Weitere Erweiterungen