CSS padding-left Eigenschaft
Wie die CSS-Eigenschaft padding-left den linken Innenabstand eines Elements festlegt. Werte und Beispiele im Überblick.
Die CSS-Eigenschaft padding-left legt die Breite des Innenabstandsbereichs auf der linken Seite eines Elements fest. Padding ist der Abstand zwischen dem Inhalt eines Elements und seinem Rahmen — durch Vergrößern von padding-left wird der Inhalt nach rechts, weg vom linken Rand, verschoben, ohne die Nachbarelemente zu beeinflussen.
Diese Seite behandelt die Syntax von padding-left, die akzeptierten Einheiten und Schlüsselwörter, die Berechnung von Prozentwerten, die Interaktion mit der Kurzschreibweise padding und dem Box-Modell sowie ausführbare Beispiele.
Wann padding-left verwendet werden sollte
Verwenden Sie padding-left (statt der Kurzschreibweise padding), wenn Sie nur eine Seite anpassen möchten und die Regel explizit und leicht lesbar halten wollen — zum Beispiel beim Einrücken von Listentext, beim Versetzen eines Labels von einem Symbol oder beim Erzeugen von Luft auf der linken Seite einer Karte.
Wenn Sie alle vier Seiten gleichzeitig setzen, verwenden Sie stattdessen die Kurzschreibweise padding. Die Einzelseiten-Longhands — padding-left, padding-right, padding-top und padding-bottom — sind praktisch, um nur einen Wert zu überschreiben, nachdem eine Kurzschreibweise die übrigen gesetzt hat.
Padding ist nicht margin. Padding befindet sich innerhalb des Rahmens des Elements und teilt den Hintergrund des Elements; margin-left fügt Abstand außerhalb des Rahmens hinzu und ist stets transparent. Wenn Sie ein Element von seinem Nachbarn trennen möchten, verwenden Sie margin; um den Inhalt nach innen zu verschieben, verwenden Sie padding.
Negative Werte sind nicht erlaubt. Im Gegensatz zu margins kann padding niemals negativ sein.
Bei Inline-Elementen wie <span> wird horizontales Padding angewendet (und ist sichtbar), verschiebt aber keine benachbarten Zeilenboxen — vertikal hat es daher scheinbar keinen Layout-Effekt. Für volle Kontrolle setzen Sie das Element auf display: inline-block oder display: block.
Wie padding-left das Box-Modell beeinflusst
Standardmäßig verwendet der Browser das Standard-CSS-Box-Modell, bei dem die gerenderte Breite eines Elements seine width plus den linken und rechten Innenabstand plus seine Rahmen beträgt. Das Hinzufügen von padding-left: 100px macht das Element also insgesamt 100px breiter.
Wenn das Padding innerhalb der deklarierten width enthalten sein soll, anstatt hinzuaddiert zu werden, setzen Sie box-sizing: border-box. Dies ist die häufigste Ursache für „mein Layout ist übergelaufen, als ich Padding hinzugefügt habe" — border-box behebt das Problem.
| Standardwert | 0 |
|---|---|
| Gilt für | Alle Elemente, mit Ausnahme, wenn die Eigenschaft display auf table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column gesetzt ist. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Der Innenabstand ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.paddingLeft = "40px"; |
Syntax
Syntax der CSS padding-left Eigenschaft
padding-left: length | percentage | initial | inherit;Der Wert ist meist eine feste Länge (px, em, rem, cm, …) oder ein Prozentwert. Prozentwerte werden relativ zur Breite des umgebenden Blocks berechnet — sowohl für linke/rechte als auch für obere/untere Abstände — ein responsiver Prozentwert skaliert also mit der Breite des Containers.
Beispiel mit einem px-Wert
Ein fester Pixelwert ist die verlässlichste Wahl. Hier verschiebt padding-left: 100px den Absatztext um 100px vom linken Rahmen:
<!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 mit einem cm-Wert
Jede absolute Längeneinheit funktioniert auf dieselbe Weise. Hier wird der Innenabstand in Zentimetern angegeben:
<!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 mit einem Prozentwert
Ein Prozentwert ist relativ zur Breite des umgebenden Blocks, sodass der Einzug mit dem Layout wächst und schrumpft. Beachten Sie, dass zuerst padding: 20px als Kurzschreibweise deklariert wird und dann padding-left: 15% nur die linke Seite überschreibt:
<!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 | Ausprobieren |
|---|---|---|
| length | Setzt den linken Innenabstand als feste Länge (px, pt, em, rem, cm usw.). Der Standardwert ist 0. Negative Längen sind ungültig. | Ausprobieren » |
| % | Setzt den linken Innenabstand als Prozentsatz der Breite des umgebenden Blocks. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück (0). | Ausprobieren » |
| inherit | Übernimmt den berechneten padding-left-Wert des Elternelements. (Padding wird standardmäßig nicht vererbt.) |
Verwandte Eigenschaften
padding— die Kurzschreibweise, die alle vier Seiten auf einmal setzt.padding-right,padding-top,padding-bottom— die anderen Einzelseiten-Longhands.margin-left— fügt Abstand außerhalb des Rahmens hinzu statt innerhalb.box-sizing— steuert, ob Padding zurwidthdes Elements addiert oder darin einbezogen wird.display— beeinflusst, wie horizontales Padding bei Inline- vs. Block-Elementen wirkt.