CSS Grundlagen: Padding im Fokus – Mach dein Layout mit dem richtigen Innenabstand noch besser

CSS Eigenschaft Padding – Innenabstand

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

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

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 Breite und Höhe 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 padding-top (oben) und padding-bottom (unten)
     der zweite Wert gilt für padding-right (rechts) und padding-left (links).

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

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

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

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

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;
}

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

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