HTML-DOM Stil Eigenschaft margin
Style - Objekte Definition und Verwendung
Marge Eigenschaftssätze oder kehrt von den äußeren Elementen.
Diese Eigenschaft kann 1-4 Arten von Werten verwendet werden:
- Wenn Sie einen Wert angeben, zum Beispiel: div {margin: 50px} - alle vier Ränder sind 50px.
- Wenn beide Werte angegeben werden, zum Beispiel: div {margin: 50px 10px} - Marge und der untere Rand ist 50px, den linken Rand und rechten Rand 10px ist.
- Wenn Sie drei Werte angeben, zum Beispiel: div {margin: 50px 10px 20px} - der Spielraum ist 50px, linken Rand und rechten Rand ist 10px ist unteren Rand 20px.
- Wenn Sie vier Arten von Werten angeben, wie: div {margin: 50px 10px 20px 30px} - der Spielraum ist 50px, der rechte Rand ist 10px, untere Rand ist 20px, linken Rand ist 30px.
Grammatik
Stellen Sie die Randeigenschaften:
Object.style.margin="%|length|auto|inherit"
Gibt Marge Eigenschaften:
Object.style.margin
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比外边距。 |
| length | 使用 px、cm 等单位定义外边距的宽度。 |
| auto | 浏览器设定的外边距（所有四个外边距是相等的）。 |
| inherit | 外边距从父元素继承。 |
Browser-Unterstützung
Alle gängigen Browser unterstützen Marge Eigenschaften.
Hinweis: IE7 und früheren Versionen nicht unterstützen , die "erben" Wert.IE8 bietet nur! DOCTYPE unterstützt "erben". IE9 Unterstützung "erben".
Tipps und Hinweise
Randeigenschaften und Polstereigenschaften werden in den Raum um das Element eingefügt. Jedoch ist die Differenz, margin wird in den Raum um die Außenseite der Grenze, padding Einsätze Raum innerhalb des Elementbegrenzung eingesetzt werden.
Beispiele
Beispiele
Ändern Margen div-Element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.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">这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的外边距</button>
<br>
<br>
<div id="ex2">这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的内边距</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.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">这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的外边距</button>
<br>
<br>
<div id="ex2">这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的内边距</button>
</body>
</html>
Versuchen »
Style - Objekte