CSS padding-left-Eigenschaft
Die CSS-Eigenschaft padding-left legt den Polsterabstand (Padding) auf der linken Seite eines Elements fest.
INFO
Negative Werte sind nicht gültig.
INFO
Diese Eigenschaft hat keine Auswirkung auf Inline-Elemente, wie <span>.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente, mit Ausnahme, 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. |
| Vererbt | Nein. |
| Animierbar | Ja. Der Polsterabstand ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.paddingLeft = "40px"; |
Syntax
Syntax der CSS padding-left-Eigenschaft
css
padding-left: length | initial | inherit;Beispiel für die padding-left-Eigenschaft:
Beispiel der CSS padding-left-Eigenschaft mit px-Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 100px;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Ergebnis
Beispiel für die padding-left-Eigenschaft mit dem Wert „3cm“:
Beispiel der CSS padding-left-Eigenschaft mit cm-Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 3cm;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Beispiel für die padding-left-Eigenschaft mit dem Wert „Prozent“:
CSS padding-left-Eigenschaft Beispiel mit %
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 20px;
padding-left: 15%;
}
</style>
</head>
<body>
<h2>Padding-left 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 linken Polsterabstand in px, pt, cm usw. fest. Der Standardwert ist 0px. | Ausführen » |
| % | Legt den linken Polsterabstand in Prozent der Breite des Elternelements fest. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem Elternelement. |
Praxis
Wie wird padding-left in CSS gemäß dem Seiteninhalt korrekt verwendet?