Style marginTopEigenschaft
Style-Objekt
Definition und Verwendung
Die marginTop-Eigenschaft setzt oder gibt den oberen Außenabstand eines Elements zurück.
Syntax
Festlegen der marginTop-Eigenschaft:
Object.style.marginTop="%|length|auto|inherit"
Zurückgeben der marginTop-Eigenschaft:
Object.style.marginTop
| Wert | Beschreibung |
|---|---|
| % | Definiert den oberen Außenabstand als Prozentsatz, basierend auf der Breite des übergeordneten Elements. |
| length | Definiert die Breite des oberen Außenabstands mithilfe von Einheiten wie px, cm usw. |
| auto | Der vom Browser festgelegte obere Außenabstand. |
| inherit | Der obere Außenabstand wird vom übergeordneten Element geerbt. |
Browser-Unterstützung
Alle wichtigen Browser unterstützen die marginTop-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 Eigenschaft margin als auch die Eigenschaft padding fügen Platz um ein Element ein. Der Unterschied besteht jedoch darin, dass margin Platz außerhalb des Rahmens einfügt, während padding Platz innerhalb des Rahmens des Elements einfügt.
Beispiel
Beispiel
Ändern Sie den oberen Außenabstand 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.marginTop="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingTop="100px";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="changeMargin()">Oberen Außenabstand des div-Elements ändern</button>
<br>
<br>
<div id="ex2">Dies ist etwas Text.</div>
<br>
<button type="button" onclick="changePadding()">Oberen Innenabstand des div-Elements ändern</button>
</body>
</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.marginTop="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingTop="100px";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="changeMargin()">Oberen Außenabstand des div-Elements ändern</button>
<br>
<br>
<div id="ex2">Dies ist etwas Text.</div>
<br>
<button type="button" onclick="changePadding()">Oberen Innenabstand des div-Elements ändern</button>
</body>
</html>
Selbst ausprobieren »
Style-Objekt Andere Erweiterungen