CSS-Eigenschaft padding-top

Die Eigenschaft padding-top stellt den Padding-Bereich auf die Oberseite eines Elements ein.

Negative Werte sind nicht gültig.
Diese Eigenschaft hat keinen Einfluss auf Inline-Elemente, wie <span>.
Anfangswert 0
Gilt für Alle Elemente, 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.paddingTop = "10px";

Syntax

padding-top: length | initial | inherit;

Beispiel

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

Ein anderes Beispiel, wo top padding mit dem Wert "em" verwendet wird.

Beispiel

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

Werte

Wert Beschreibung
length Stellt die obere Polsterung in px, pt, cm usw. ein. Der Standardwert ist 0.
% Stellt die obere Polsterung in % 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 bewirkt die CSS-Eigenschaft 'padding-top'?
Finden Sie das nützlich?