CSS-Eigenschaften: Padding – Innenabstand festlegen

Innenabstand: CSS Property padding

Mit Padding wird der Innenabstand (bzw. Polsterung) eines HTML-Elements definiert. Der Innenabstand ist definiert als der Abstand zwischen dem Inhalt eines Elements und seinem Rahmen.

Die CSS-Eigenschaft Padding ist die Kurzschreibweise für die vier Eigenschaften

padding-top Innenabstand oben
padding-right Innenabstand rechts
padding-bottom Innenabstand unten
padding-left Innenabstand links
Margin - Außenabstand
Innenabstand – padding
Anzeige

CSS-Eigenschaft: Padding
Beschreibung mögliche Werte Standardwert Kategorie
Innenabstand (Padding) Länge in px oder em
Prozent
auto
initial
inherit		 0 Box-Modell
Abstände

Die Angabe in oranger Schrift ist die Standardanwendung dieser CSS-Eigenschaft.

Beachte:

  1. Padding kann für alle vier Seiten (top, right, bottom, left) individuell konfiguriert werden. Der Innenabstand wird meist in px, em oder Prozent angegeben.

  2. Der Inhaltsbereich zuzüglich Padding definiert die Content-Box des Elements. Der Bereich für Padding muss also zum Inhaltsbereich hinzugefügt werden, um die gesamte Höhe und Breite für das Element zu erhalten.

  3. Für Padding können 1, 2, 3 oder 4 Werte angegeben werden.

    • ein Wert
      Der Wert gilt für alle vier Seiten.

    • zwei Werte
      Der erste Wert gilt für oben (padding-top) und unten (padding-bottom),
      der zweite Wert gilt für rechts (padding-right) und links (padding-left).

    • drei Werte
      Der erste Wert gilt für oben (padding-top),
      der zweite Wert gilt für rechts (padding-right) und links (padding-left),
      der dritte Wert gilt für unten (padding-bottom).

    • vier Werte
      Der erste Wert gilt für oben (padding-top),
      die anderen Werte folgen im Uhrzeigersinn, d.h.
      der zweite Wert gilt für rechts (padding-right),
      der dritte Wert gilt für unten (padding-bottom) und
      der vierte Wert gilt für links (padding-left).

  4. Der Padding-Bereich erhält stets die gleiche Hintergrundfarbe wie der Inhaltsbereich.

  5. Negative Werte für Padding sind nicht erlaubt.

Anzeige
Beispiel CSS 
div {
  /* Außenabstand: 1em vertikal, 2em horizontal */
  margin: 1em 2em;

  /* Hintergrund: antiqueWhite */
  background: #faebd7;

  /* Rahmen: Gold */
  border: 0.0625em solid #ffd700;
}


/* Absatz definieren */
p {
  /* Hintergrund: paleSpring */
  background: #dfdfbc;

  /* Schriftfarbe: darkGrey */
  color: #404040;

  /* Rahmen: darkRed */
  border: 0.0625em solid #dd0000;
}
Beispiel HTML 
<div>
<p>Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die für alle Browser geeignet ist. Die Seite ist genauso gut zum Drucken oder für die Darstellung auf einem Smartphone geeignet ist. Wohlgemerkt: es reicht eine für alle Browser und alle Geräte.</p>
</div>
Ausgabe des HTML-Codes

Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die für alle Browser geeignet ist. Die Seite ist genauso gut zum Drucken oder für die Darstellung auf einem Smartphone geeignet ist. Wohlgemerkt: es reicht eine für alle Browser und alle Geräte.

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Anzeige