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.

Die Wirkung der CSS-Eigenschaft padding-top auf das Elementkästchen

Hinweis: Die Eigenschaft padding kann verwendet werden, um mit einer einzigen Deklaration die Abstände auf allen vier Seiten eines Elements festzulegen.

Syntax

css
/* <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

Anfangswert0
Anwendbar aufalle 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.
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge
AnimationstypLängenangabe

Formale Syntax

padding-top = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Oberes Polster mithilfe von Pixeln und Prozentangaben festlegen

css
.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

Siehe auch