CSS padding (Füllung)

CSS padding ist eine Shorthand-Eigenschaft, die den Abstand zwischen dem Rahmen eines Elements und seinem Inhalt definiert, d. h. den Innenabstand (padding) oben, rechts, unten und links.

padding (Füllung)

Wenn der padding-Wert eines Elements zurückgesetzt wird, wird der freigesetzte Bereich mit der Hintergrundfarbe des Elements gefüllt.

Die alleinige Verwendung der padding-Eigenschaft kann den Innenabstand auf allen vier Seiten ändern.

mögliche Werte

Wert Beschreibung
length Definiert einen festen Innenabstand (Pixel, pt, em usw.)
% Definieren Sie einen Innenabstand mithilfe von Prozentwerten

Padding – Eigenschaften für einseitiges Padding

In CSS kann damit unterschiedliches Padding für verschiedene Seiten angegeben werden:

Beispiel

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Selbst ausprobieren »
  • Der obere Innenabstand beträgt 25px
  • Der rechte Innenabstand beträgt 50px
  • Der untere Innenabstand beträgt 25px
  • Der linke Innenabstand beträgt 50px

Padding - Kurzschreibweisen

Um den Code zu verkürzen, können alle Padding-Eigenschaften in einer Eigenschaft angegeben werden.

Dies nennt man eine Kurzschreibweise. Die Kurzschreibweise für alle Padding-Eigenschaften ist:padding :

Beispiel

padding:25px 50px;

Selbst ausprobieren »

Die padding-Eigenschaft kann ein bis vier Werte haben.

  padding:25px 50px 75px 100px;

  • Der obere Innenabstand beträgt 25px
  • Der rechte Innenabstand beträgt 50px
  • Der untere Innenabstand beträgt 75px
  • Der linke Innenabstand beträgt 100px

  padding:25px 50px 75px;

  • Der obere Innenabstand beträgt 25px
  • Der linke und der rechte Innenabstand betragen 50px
  • Der untere Innenabstand beträgt 75px

  padding:25px 50px;

  • Der obere und der untere Innenabstand betragen 25px
  • Der linke und der rechte Innenabstand betragen 50px

  padding:25px;

  • Der gesamte Innenabstand beträgt 25px
Examples

Weitere Beispiele

Alle Padding-Eigenschaften in einer Deklaration
Dieses Beispiel zeigt, wie die Kurzschreibweise verwendet wird, um alle Eigenschaften für den Innenabstand in einer Deklaration festzulegen, die einen bis vier Werte haben kann.

Linken Innenabstand festlegen
Dieses Beispiel zeigt, wie der linke Innenabstand eines Elements festgelegt wird.

Rechten Innenabstand festlegen
Dieses Beispiel zeigt, wie der rechte Innenabstand eines Elements festgelegt wird.

Oberen Innenabstand festlegen
Dieses Beispiel zeigt, wie man das obere Padding eines Elements festlegt.

Unteres Padding festlegen
Dieses Beispiel zeigt, wie man das untere Padding eines Elements festlegt.

Alle CSS-Padding-Eigenschaften

Eigenschaft Beschreibung
padding Verwenden Sie die Kurzschreibweise, um alle Padding-Eigenschaften in einer Deklaration festzulegen.
padding-bottom Legt das untere Padding des Elements fest.
padding-left Legt das linke Padding eines Elements fest
padding-right Legt das rechte Padding eines Elements fest
padding-top Legt den oberen Innenabstand des Elements fest.
Weitere Erweiterungen