padding

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-CSS-Kurzform-Eigenschaft legt den Abstandsbereich auf allen vier Seiten eines Elements gleichzeitig fest.

Probieren Sie es aus

Der Abstandsbereich (padding area) eines Elements ist der Raum zwischen seinem Inhalt und seiner Umrandung (border).

Hinweis:>Padding erzeugt zusätzlichen Platz innerhalb eines Elements. Im Gegensatz dazu erzeugt margin zusätzlichen Platz um ein Element herum.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* Apply to all four sides */
padding: 1em;

/* top and bottom | left and right */
padding: 5% 10%;

/* top | left and right | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

Die padding-Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist entweder ein <length> oder ein <percentage>. Negative Werte sind ungültig.

  • Wenn ein Wert angegeben wird, gilt das gleiche Padding für alle vier Seiten.
  • Wenn zwei Werte angegeben werden, gilt das erste Padding für oben und unten, das zweite für links und rechts.
  • Wenn drei Werte angegeben werden, gilt das erste Padding für oben, das zweite für rechts und links, das dritte für unten.
  • Wenn vier Werte angegeben werden, gelten die Paddings in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).

Werte

<length>

Die Größe des Paddings als ein fester Wert.

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

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
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 Wertwie die jeweiligen Kurzschreibweisen:
  • padding-bottom: der Prozentwert wie angegeben oder die absolute Länge
  • padding-left: der Prozentwert wie angegeben oder die absolute Länge
  • padding-right: der Prozentwert wie angegeben oder die absolute Länge
  • padding-top: der Prozentwert wie angegeben oder die absolute Länge
AnimationstypLängenangabe

Formale Syntax

padding = 
<'padding-top'>{1,4}

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

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

Beispiele

Padding mit Pixeln festlegen

HTML

html
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>

CSS

css
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

Ergebnis

Padding mit Pixeln und Prozentsätzen festlegen

css
padding: 5%; /* All sides: 5% padding */

padding: 10px; /* All sides: 10px padding */

padding: 10px 20px; /* top and bottom: 10px padding */
/* left and right: 20px padding */

padding: 10px 3% 20px; /* top:            10px padding */
/* left and right: 3% padding   */
/* bottom:         20px padding */

padding: 1em 3px 30px 5px; /* top:    1em padding  */
/* right:  3px padding  */
/* bottom: 30px padding */
/* left:   5px padding  */

Spezifikationen

Specification
CSS Box Model Module Level 3
# padding-shorthand

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
padding

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch