HTML-DOM Stil Eigenschaft padding
Style - Objekte Definition und Verwendung
padding-Eigenschaft legt ein oder gibt den Polsterelement.
Diese Eigenschaft kann 1-4 Arten von Werten verwendet werden:
- Wenn Sie einen Wert angeben, zum Beispiel: div {padding: 50px} - alles innerhalb von vier Ränder sind 50px.
- Wenn beide Werte angegeben werden, zum Beispiel: div {padding: 50px 10px} - oberen und unteren Rand auf Nene ist 50px, die linken und rechten Rand und Polsterung ist 10px.
- Wenn Sie drei Werte angeben, zum Beispiel: div {padding: 50px 10px 20px} - innerhalb der Ränder 50px sind, die linken und rechten Rand und Polsterung ist 10px, ist unten Polsterung 20px.
- Wenn Sie vier Arten von Werten angeben, wie: div {padding: 50px 10px 20px 30px} - innerhalb der Marge 50px ist, und die rechte Polsterung ist 10px unten Polsterung ist 20px, die linken Ränder 30px sind.
Grammatik
Einstellen Polstereigenschaften:
Object.style.padding="%|length|inherit"
Rückenpolster Eigenschaften:
Object.style.padding
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比内边距。 |
| length | 使用 px、cm 等单位定义内边距的宽度。 |
| inherit | 内边距从父元素继承。 |
Browser-Unterstützung
Alle gängigen Browser unterstützen Polstereigenschaften.
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 Sie div-Elemente innerhalb der Ränder:
<!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