CSS -Padding- Eigenschaft
Beispiel
Stellen Sie die Auffüllung für alle vier Seiten eines <p>-Elements auf 35 Pixel ein:
p {
padding: 35px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Polsterung eines Elements ist der Abstand zwischen seinem Inhalt und seinem Rand.
Die padding
Eigenschaft ist eine abgekürzte Eigenschaft für:
Hinweis: Padding schafft zusätzlichen Platz innerhalb eines Elements, während margin zusätzlichen Platz um ein Element herum schafft.
Diese Eigenschaft kann einen bis vier Werte haben.
Wenn die padding-Eigenschaft vier Werte hat:
- Polsterung: 10px 5px 15px 20px;
- Die obere Polsterung beträgt 10 Pixel
- rechte Polsterung ist 5px
- Die untere Polsterung beträgt 15 Pixel
- linke Polsterung ist 20px
Wenn die padding-Eigenschaft drei Werte hat:
- Polsterung: 10px 5px 15px;
- Die obere Polsterung beträgt 10 Pixel
- rechte und linke Polsterung sind 5px
- Die untere Polsterung beträgt 15 Pixel
Wenn die Eigenschaft padding zwei Werte hat:
- Polsterung: 10px 5px;
- Die obere und untere Polsterung beträgt 10 Pixel
- rechte und linke Polsterung sind 5px
Wenn die Padding-Eigenschaft einen Wert hat:
- Polsterung: 10px;
- alle vier Paddings sind 10 Pixel groß
Hinweis: Negative Werte sind nicht zulässig.
Standardwert: | 0 |
---|---|
Vererbt: | Nein |
Animierbar: | Ja, siehe einzelne Eigenschaften . Lesen Sie mehr über animierbare |
Ausführung: | CSS1 |
JavaScript-Syntax: | Objekt .style.padding="100px 20px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS-Syntax
padding: length|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
% | Specifies the padding in percent of the width of the containing element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Stellen Sie die Auffüllung für ein <p>-Element auf 35 Pixel für oben und unten und auf 70 Pixel für rechts und links ein:
p {
padding: 35px 70px;
}
Beispiel
Stellen Sie die Auffüllung für ein <p>-Element auf 35 Pixel für oben, 70 Pixel für rechts und links und auf 50 Pixel für unten ein:
p {
padding: 35px 70px 50px;
}
Beispiel
Stellen Sie die Auffüllung für ein <p>-Element auf 35 Pixel für oben, 70 Pixel für rechts, 50 Pixel für unten und 90 Pixel für links ein:
p {
padding: 35px 70px 50px 90px;
}
Verwandte Seiten
CSS-Tutorial: CSS-Padding
CSS-Tutorial: CSS-Box-Modell
HTML-DOM-Referenz: Padding-Eigenschaft