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>

Versuch es selber!

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>

Versuch es selber!

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.