CSS-Eigenschaft padding-bottom

Die CSS-Eigenschaft padding-bottom eines Elements stellt den Padding-Bereich auf der Unterseite eines Elements ein.

Negative Werte sind ungültig.

Diese Eigenschaft hat keinen Einfluss auf Inline-Elemente, wie z. B. <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 gesetzt ist. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja. Der Polsterbereich ist animierbar.
Version	CSS1
DOM Syntax	object.style.paddingBottom = "5%";

Syntax

padding-bottom: length | initial | inherit;

Beispiel

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

Versuch es selber!

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-bottom: 2cm;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für padding-bottom</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
  </body>
</html>

Versuch es selber!

Werte

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