W3docs
de
Anmelden

CSS padding-bottom Eigenschaft

Erfahren Sie, wie die CSS-Eigenschaft padding-bottom Abstand zwischen Inhalt und unterem Rand eines Elements erzeugt, mit Werten und Beispielen.

Die Eigenschaft padding-bottom legt fest, wie viel Platz zwischen dem Inhalt eines Elements und seinem unteren Rand vorhanden ist. Sie steuert den inneren Abstand ausschließlich auf der Unterseite und ist eine der vier individuellen Padding-Eigenschaften neben padding-top, padding-left und padding-right.

padding-bottom ist nützlich, wenn Sie unterhalb von Text oder anderen Inhalten gezielt vertikalen Freiraum benötigen – ohne die umgebenden Elemente so zu beeinflussen, wie es margin-bottom täte.

Info

Negative Werte sind für padding-bottom nicht erlaubt. Der Mindestwert beträgt 0.

Info

padding-bottom hat keine sichtbare Auswirkung auf nicht ersetzte Inline-Elemente wie <span>. Um vertikale Abstände hinzuzufügen, ändern Sie den display-Wert des Elements auf inline-block oder block.

Anfangswert0
Gilt fürAlle Elemente außer solche, deren display auf table-row-group, table-header-group, table-footer-group, table-row, table-column-group oder table-column gesetzt ist. Gilt auch für ::first-letter.
VererbbarNein
AnimierbarJa
VersionCSS1
DOM-Syntaxelement.style.paddingBottom = "5%";

Syntax

padding-bottom: <length> | <percentage> | initial | inherit;

Die Eigenschaft akzeptiert einen einzelnen Wert. Die Kurzschreibweise padding mit vier Werten ist gleichwertig, setzt jedoch alle vier Seiten gleichzeitig.

Werte

WertBeschreibung
<length>Ein fester unterer Innenabstand, angegeben in einer beliebigen CSS-Längeneinheit (px, em, rem, pt, cm usw.). Der Anfangswert ist 0.
<percentage>Unterer Innenabstand als Prozentsatz der Breite (nicht der Höhe) des umgebenden Blocks. Das überrascht viele Entwickler – siehe Hinweis unten.
initialSetzt die Eigenschaft auf ihren Standardwert zurück (0).
inheritÜbernimmt den berechneten Wert vom übergeordneten Element.
Info

Prozentwerte beziehen sich auf die Breite des umgebenden Blocks, nicht auf dessen Höhe. Dies gilt für alle vier Padding-Seiten und ist in der CSS-Spezifikation so definiert. Das bedeutet, dass padding-bottom: 50% eine Höhe erzeugt, die der Hälfte der Containerbreite entspricht – eine Technik, die verwendet wurde, um Seitenverhältnis-Boxen zu erstellen, bevor die Eigenschaft aspect-ratio existierte.

Wie padding-bottom das Layout beeinflusst

padding-bottom erhöht die Gesamthöhe des Elements. Die genaue Berechnung hängt vom wirksamen Wert von box-sizing ab:

  • content-box (Standard): Gesamthöhe = height + padding-top + padding-bottom + border-top + border-bottom. Der Wert von padding-bottom wird zur angegebenen height addiert.
  • border-box: Die angegebene height beinhaltet Padding und Border. Durch das Hinzufügen von padding-bottom verkleinert sich der Inhaltsbereich, anstatt dass das Element wächst.

Beispiele

Einfacher Pixelwert

Die häufigste Verwendung – eine feste Anzahl von Pixeln unterhalb des Inhalts:

<!DOCTYPE html>
<html>
  <head>
    <title>padding-bottom with px</title>
    <style>
      p {
        border: 2px solid #000;
        color: #1c87c9;
        padding-bottom: 40px;
      }
    </style>
  </head>
  <body>
    <h2>padding-bottom: 40px</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Probier es selbst »

Längenwert in Zentimetern

Jede CSS-Längeneinheit funktioniert. Hier wird 2cm verwendet, was für Print-Stylesheets nützlich ist:

<!DOCTYPE html>
<html>
  <head>
    <title>padding-bottom with cm</title>
    <style>
      p {
        border: 2px solid #000;
        color: #1c87c9;
        padding-bottom: 2cm;
      }
    </style>
  </head>
  <body>
    <h2>padding-bottom: 2cm</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Probier es selbst »

Prozentwert

padding-bottom: 25% fügt einen unteren Innenabstand hinzu, der 25% der Breite des umgebenden Blocks entspricht. Dieses Beispiel verwendet ihn, um eine einfache visuelle Karte mit proportionalem Abstand zu erstellen:

<!DOCTYPE html>
<html>
  <head>
    <title>padding-bottom with %</title>
    <style>
      .card {
        width: 300px;
        border: 2px solid #1c87c9;
        background: #e8f4fd;
        padding-bottom: 25%; /* = 75px (25% of 300px) */
        padding-top: 16px;
        padding-left: 16px;
        padding-right: 16px;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <strong>Card title</strong>
      <p>The bottom padding equals 25% of the card's width.</p>
    </div>
  </body>
</html>

em für skalierbare Abstände verwenden

Auf em basierendes Padding skaliert mit der Schriftgröße des Elements, sodass die Proportionen erhalten bleiben, wenn sich die Schriftgröße ändert:

<!DOCTYPE html>
<html>
  <head>
    <title>padding-bottom with em</title>
    <style>
      .note {
        font-size: 18px;
        border-left: 4px solid #1c87c9;
        padding-left: 12px;
        padding-bottom: 1em; /* = 18px, matches font-size */
        background: #f0f8ff;
      }
    </style>
  </head>
  <body>
    <div class="note">
      This note box uses <code>padding-bottom: 1em</code>. If you increase
      the font size, the bottom padding grows proportionally.
    </div>
  </body>
</html>

Vergleich box-sizing

Dieselben Werte für height und padding-bottom verhalten sich unter content-box und border-box unterschiedlich:

<!DOCTYPE html>
<html>
  <head>
    <title>padding-bottom and box-sizing</title>
    <style>
      .box {
        width: 220px;
        height: 80px;
        padding-bottom: 40px;
        border: 2px solid #333;
        background: #d0e8ff;
        margin-bottom: 12px;
        color: #111;
        font-size: 14px;
      }
      .content-box { box-sizing: content-box; } /* total height = 80+40+4 = 124px */
      .border-box  { box-sizing: border-box;  } /* total height stays 80px        */
    </style>
  </head>
  <body>
    <div class="box content-box">content-box — total height: 124px</div>
    <div class="box border-box">border-box — total height: 80px</div>
  </body>
</html>

Verwandte Eigenschaften

  • padding — Kurzschreibweise, die alle vier Seiten gleichzeitig setzt.
  • padding-top — Abstand oberhalb des Inhalts.
  • padding-left — Abstand links vom Inhalt.
  • padding-right — Abstand rechts vom Inhalt.
  • margin-bottom — äußerer Abstand unterhalb des Element-Rahmens (außen, nicht innen).
  • box-sizing — steuert, ob Padding in der deklarierten width/height enthalten ist.
  • height — die Höhe des Inhaltsbereichs, die im content-box-Modus durch padding-bottom beeinflusst wird.

Übungen

Übung
Wozu dient die CSS-Eigenschaft 'padding-bottom'?
Wozu dient die CSS-Eigenschaft 'padding-bottom'?
Was this page helpful?