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 Juli 2015.
Die padding-top CSS Eigenschaft setzt die Höhe des Innenabstandsbereichs oben in einem Element.
Probieren Sie es aus
padding-top: 1em; padding-top: 10%; padding-top: 20px; padding-top: 1ch; padding-top: 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 Innenabstandsbereich eines Elements ist der Raum zwischen seinem Inhalt und seinem Rand.
Hinweis: Die padding Eigenschaft kann verwendet werden, um Abstände an allen vier Seiten eines Elements mit einer einzigen Deklaration 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 ein einzelner Wert angegeben, der aus der nachstehenden Liste ausgewählt wird. Im Gegensatz zu Rändern sind negative Werte für Innenabstände nicht erlaubt.
Werte
<length>-
Die Größe des Innenabstands als fester Wert. Muss nicht negativ sein.
<percentage>-
Die Größe des Innenabstands als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) des Umgebungsblocks. 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-top =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Beispiele
Festlegung des oberen Innenabstands mit Pixeln und Prozentsätzen
.content { padding-top: 5%; } .side-box { padding-top: 10px; } Spezifikationen
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
Browser-Kompatibilität
Siehe auch
padding-right,padding-bottom,padding-leftpaddingKurzschreibweisepadding-block-start,padding-block-end,padding-inline-start, undpadding-inline-endpadding-blockundpadding-inlineKurzschreibweisen- Einführung in das CSS-Boxmodell Leitfaden
- CSS-Boxmodell Modul