CSS-Eigenschaft padding-left

Die CSS-Eigenschaft padding-left stellt den Padding-Bereich auf der linken Seite eines Elements ein.

Negative Werte sind nicht gültig.
Diese Eigenschaft hat keinen Einfluss auf Inline-Elemente, wie das Tag <span>.
Anfangswert 0
Gilt für Alle Elements, außer wenn die Eigenschaft display auf table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column eingestellt ist. Das gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja, der Polsterbereich ist animierbar.
Version CSS1
DOM Syntax object.style.paddingLeft = "40px";

Syntax

padding-left: length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      border: 2px solid #000; 
      color: #1c87c9;
      padding-left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft padding-left</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
  </body>
</html>

Ein weiteres Beispiel, wo der Polsterbereich auf "2cm" eingestellt ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      border: 2px solid #000; 
      color: #1c87c9;
      padding-left: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft padding-left</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
  </body>
</html>

Werte

Wert Beschreibung
length Es stellt die linke Polsterung in px, pt, cm usw. ein. Der Standardwert ist 0px.
% Stellt die linke Polsterung in Prozent der Breite des enthaltenden Elements ein.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was genau bewirkt die 'padding-left'-Eigenschaft in CSS?
Finden Sie das nützlich?