Style -Padding- Eigenschaft
Beispiel
Legen Sie die Auffüllung eines <div>-Elements fest:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
Definition und Verwendung
Die Eigenschaft padding legt die Auffüllung eines Elements fest oder gibt sie zurück.
Diese Eigenschaft kann einen bis vier Werte annehmen:
Sowohl die Eigenschaft margin als auch die Eigenschaft padding fügen Leerzeichen um ein Element ein. Der Unterschied besteht jedoch darin, dass margin den Abstand um den Rand einfügt, während padding den Abstand innerhalb des Rands eines Elements einfügt.
- Ein Wert, wie: div {padding: 50px} - alle vier Seiten haben eine Auffüllung von 50px
- Zwei Werte, wie: div {padding: 50px 10px} – die obere und untere Auffüllung beträgt 50 Pixel, die linke und rechte Auffüllung 10 Pixel
- Drei Werte, wie: div {padding: 50px 10px 20px} – die obere Auffüllung beträgt 50 Pixel, die linke und rechte Auffüllung 10 Pixel, die untere Auffüllung 20 Pixel
- Vier Werte, wie: div {Padding: 50px 10px 20px 30px} – die obere Auffüllung ist 50px, die rechte Auffüllung ist 10px, die untere Auffüllung ist 20px, die linke Auffüllung ist 30px
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| padding | Yes | Yes | Yes | Yes | Yes |
Syntax
Geben Sie die Padding-Eigenschaft zurück:
object.style.padding
Legen Sie die Padding-Eigenschaft fest:
object.style.padding = "%|length|initial|inherit"
Eigenschaftswerte
| Value | Description |
|---|---|
| % | Defines the padding in % of the width of the parent element |
| length | Defines the padding in length units |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technische Details
| Standardwert: | 0 |
|---|---|
| Rückgabewert: | Ein String, der die Auffüllung eines Elements darstellt |
| CSS-Version | CSS1 |
Mehr Beispiele
Beispiel
Ändern Sie die Polsterung aller vier Seiten eines <div>-Elements in „25px“:
document.getElementById("myDiv").style.padding = "25px";
Beispiel
Gibt die Auffüllung eines <div>-Elements zurück:
alert(document.getElementById("myDiv").style.padding);
Beispiel
Unterschied zwischen der Eigenschaft margin und der Eigenschaft padding:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Verwandte Seiten
CSS-Tutorial: CSS-Padding
CSS-Referenz: padding-Eigenschaft
❮ Style-Objekt