padding-top
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-top
CSS Eigenschaft legt die Höhe des Polsterbereichs oben in einem Element fest.
Probieren Sie es aus
Der Polsterbereich eines Elements ist der Raum zwischen seinem Inhalt und seinem Rand.
Hinweis: Die Eigenschaft padding
kann verwendet werden, um mit einer einzigen Deklaration die Abstände auf allen vier Seiten eines Elements festzulegen.
Syntax
/* <length> values */
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;
/* <percentage> value */
padding-top: 10%;
/* Global values */
padding-top: inherit;
padding-top: initial;
padding-top: revert;
padding-top: revert-layer;
padding-top: unset;
Die padding-top
Eigenschaft wird als einzelner Wert aus der untenstehenden Liste angegeben. Im Gegensatz zu Rändern sind negative Werte für Polsterungen nicht zulässig.
Werte
<length>
-
Die Größe der Polsterung als fester Wert. Muss nichtnegativ sein.
<percentage>
-
Die Größe der Polsterung als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode
) des einschließenden Blocks. Muss nichtnegativ sein.
Formale Definition
Initialer Wert | 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-top =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Beispiele
Oberes Polster mithilfe von Pixeln und Prozentangaben festlegen
.content {
padding-top: 5%;
}
.side-box {
padding-top: 10px;
}
Spezifikationen
Specification |
---|
CSS Box Model Module Level 3 # padding-physical |
Browser-Kompatibilität
BCD tables only load in the browser