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 July 2015.
Die padding-bottom
-Eigenschaft (CSS) legt die Höhe des Abstandsbereichs (Padding Area) am unteren Rand eines Elements fest.
Probieren Sie es aus
Der Abstand eines Elements ist der Raum zwischen seinem Inhalt und seinem Rahmen.
Hinweis:
Die padding
-Eigenschaft kann verwendet werden, um mit einer einzigen Deklaration die Abstände an allen vier Seiten eines Elements 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 Eigenschaft padding-bottom
wird als ein einzelner Wert angegeben, der aus der unten stehenden Liste ausgewählt wird. Im Gegensatz zu Rändern (margins) sind für Abstände (padding) negative Werte nicht erlaubt.
Werte
<length>
-
Die Größe des Abstands als fester Wert. Muss nicht negativ sein.
<percentage>
-
Die Größe des Abstands als Prozentsatz relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode
) des umschließenden 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
Festlegen von padding-bottom mit Pixeln und Prozentsätzen
.content {
padding-bottom: 5%;
}
.side-box {
padding-bottom: 10px;
}
Spezifikationen
Specification |
---|
CSS Box Model Module Level 3 # padding-physical |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
padding-bottom |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
padding-top
,padding-right
, undpadding-left
padding
Kurzhandnotationpadding-block-start
,padding-block-end
,padding-inline-start
, undpadding-inline-end
padding-block
undpadding-inline
Kurzhandnotationen- Einführung in das grundlegende Box-Modell von CSS
- CSS-Boxmodell Modul