CSS padding-bottom-Eigenschaft
Die padding-bottom-Eigenschaft legt den Polsterabstand (Padding) am unteren Rand eines Elements fest. Sie definiert den Abstand zwischen dem Inhalt des Elements und seiner unteren Rahmenlinie.
Der Polsterabstand des Elements trägt zur Berechnung der Höhe eines Elements bei. Insbesondere erhöht padding-bottom die Gesamthöhe, indem es Platz unter dem Inhalt hinzufügt. Wenn Sie den Wert „border-box“ der box-sizing-Eigenschaft verwenden, ändert sich die Berechnung der Gesamthöhe so, dass der Polsterabstand in der angegebenen Höhe enthalten ist.
INFO
Negative Werte sind ungültig.
INFO
Diese Eigenschaft hat keine Auswirkung auf Inline-Elemente wie <span>.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Eine Ausnahme gilt, wenn die display-Eigenschaft auf table-row-group, table-header-group, table-footer-group, table-row, table-column-group oder table-column festgelegt ist. Sie gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Der Polsterabstand ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | element.style.paddingBottom = "5%"; |
Syntax
Syntax der CSS padding-bottom-Eigenschaft
padding-bottom: length | % | initial | inherit;Beispiel zur padding-bottom-Eigenschaft:
Beispiel zur CSS padding-bottom-Eigenschaft mit px-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Ergebnis
Beispiel zur padding-bottom-Eigenschaft mit dem „length“-Wert:
Beispiel zur CSS padding-bottom-Eigenschaft mit cm-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| length | Legt den unteren Polsterabstand in px, pt, cm usw. fest. Der Anfangswert ist 0. | Ausführen » |
| % | Legt den unteren Polsterabstand in Prozent der Breite des umschließenden Blocks fest. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was ist der Zweck der 'padding-bottom'-Eigenschaft in CSS?