CSS padding Eigenschaft

Definition und Verwendung

Die padding-Abkürzungseigenschaft stellt alle Innenabstandseigenschaften in einer Deklaration ein.

Erklärung

Diese Abkürzungseigenschaft stellt die Breite aller Innenabstände des Elements ein oder stellt die Breite der Innenabstände an jeder Seite ein. Der Innenabstand von inline-nicht-austauschbaren Elementen beeinflusst die Berechnung der Zeilenhöhe nicht; daher kann ein Element, das sowohl Innenabstand als auch Hintergrund hat, optisch in andere Zeilen hineinragen und möglicherweise mit anderen Inhalten überlappen. Der Hintergrund des Elements erstreckt sich durch den Innenabstand. Negative Ränder sind nicht zulässig.

Anmerkung:Negative Werte sind nicht erlaubt.

Beispiel 1

padding:10px 5px 15px 20px;
  • Oberer Innenabstand ist 10px
  • Rechter Innenabstand ist 5px
  • Unterer Innenabstand ist 15px
  • Linker Innenabstand ist 20px

Beispiel 2

padding:10px 5px 15px;
  • Oberer Innenabstand ist 10px
  • Rechter Innenabstand und linker Innenabstand sind 5px
  • Unterer Innenabstand ist 15px

Beispiel 3

padding:10px 5px;
  • Oberer Innenabstand und unterer Innenabstand sind 10px
  • Rechter Innenabstand und linker Innenabstand sind 5px

Beispiel 4

padding:10px;
  • Alle 4 Innenabstände sind 10px

Siehe auch:

CSS-Tutorial:CSS Innenabstand

HTML DOM Referenzhandbuch:padding-Eigenschaft

Beispiel

Stellen Sie die 4 Innenabstände des Elements p ein:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

Versuchen Sie es selbst

CSS-Syntax

padding: length|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Der Browser berechnet den Innenabstand.
length Es wird der Innenabstand in spezifischen Einheiten festgelegt, z.B. Pixel, Zentimeter usw. Der Standardwert ist 0px.
% Es wird der Innenabstand in Prozent der Breite des übergeordneten Elements festgelegt.
inherit Es wird festgelegt, dass der Innenabstand vom übergeordneten Element geerbt werden soll.

Technische Details

Standardwert: 0
Vererbbarkeit: nein
Version: CSS1
JavaScript-Syntax: object.style.padding="10px 5px"

TIY-Beispiel

Alle Innenabstandseigenschaften in einer Deklaration
Dieses Beispiel zeigt, wie alle Innenabstände mit einer Abkürzungseigenschaft in einer Deklaration eingestellt werden können, was einen bis vier Werte haben kann.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5