padding-bottom
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die padding-bottom CSS-Eigenschaft legt die Höhe des Padding-Bereichs am unteren Rand eines Elements fest.
Probieren Sie es aus
padding-bottom: 1em; padding-bottom: 10%; padding-bottom: 20px; padding-bottom: 1ch; padding-bottom: 0; <section id="default-example"> <div class="transition-all" id="example-element"> <div class="box"> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. </div> </div> </section> #example-element { border: 10px solid #ffc129; overflow: hidden; text-align: left; } .box { border: dashed 1px; } Der Padding-Bereich eines Elements ist der Raum zwischen seinem Inhalt und seinem Rahmen.
Hinweis: Die padding-Eigenschaft kann verwendet werden, um die Paddings auf allen vier Seiten eines Elements mit einer einzigen Deklaration festzulegen.
Syntax
/* <length> values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> value */ padding-bottom: 10%; /* Global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: revert; padding-bottom: revert-layer; padding-bottom: unset; Die padding-bottom-Eigenschaft wird als einzelner Wert angegeben, der aus der unten stehenden Liste ausgewählt wird. Im Gegensatz zu Margins sind negative Werte für Padding nicht erlaubt.
Werte
<length>-
Die Größe des Paddings als fester Wert. Muss nicht negativ sein.
<percentage>-
Die Größe des Paddings als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) des umgebenden Blocks. Muss nicht negativ sein.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | alle Elemente außer table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
| Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge |
| Animationstyp | Längenangabe |
Formale Syntax
padding-bottom =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Beispiele
Padding unten mit Pixeln und Prozentsätzen setzen
.content { padding-bottom: 5%; } .side-box { padding-bottom: 10px; } Spezifikationen
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
Browser-Kompatibilität
Loading…
Siehe auch
padding-top,padding-right, undpadding-leftpaddingKurzschreibweisepadding-block-start,padding-block-end,padding-inline-start, undpadding-inline-endpadding-blockundpadding-inlineKurzschreibweisen- Einführung in das CSS-Boxmodell Leitfaden
- CSS-Boxmodell Modul