Style paddingBottom-Eigenschaft
Style-Objekt
Definition und Verwendung
Die paddingBottom-Eigenschaft legt den unteren Innenabstand eines Elements fest oder gibt ihn zurück.
Syntax
Festlegen der paddingBottom-Eigenschaft:
Object.style.paddingBottom="%|length|inherit"
Zurückgeben der paddingBottom-Eigenschaft:
Object.style.paddingBottom
| Wert | Beschreibung |
|---|---|
| % | Definiert den unteren Innenabstand als Prozentwert der Breite des übergeordneten Elements. |
| length | Definiert den unteren Innenabstand in Einheiten wie px, cm usw. |
| inherit | Der untere Innenabstand wird vom übergeordneten Element geerbt. |
Browser-Unterstützung
Alle gängigen Browser unterstützen die Eigenschaft paddingBottom.
Hinweis:IE7 und frühere Versionen unterstützen den Wert "inherit" nicht. IE8 unterstützt "inherit" nur, wenn ein !DOCTYPE deklariert ist. IE9 unterstützt "inherit".
Tipps und Hinweise
Die Eigenschaften margin und padding fügen beide Abstand um ein Element ein. Der Unterschied besteht jedoch darin, dass margin Abstand um die Außenseite des Rahmens einfügt, während padding Abstand innerhalb des Rahmens des Elements einfügt.
Beispiel
Beispiel
Ändern Sie den unteren Innenabstand 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 Andere Erweiterungen