CSS-Eigenschaft 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 Eigenschaft padding ist die Kurzschreibweise für die vier CSS-Eigenschaften

padding-topInnenabstand oben
padding-rightInnenabstand rechts
padding-bottomInnenabstand unten
padding-leftInnenabstand links
Margin - Außenabstand
Innenabstand – padding

CSS-Eigenschaft: padding

Beschreibungmögliche WerteStandardwertKategorie
Innenabstand (Padding)Länge in px oder em
Prozent
auto
initial
inherit		0Box-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 HTML-Elements. Der Bereich für Padding muss also zum Inhaltsbereich hinzugefügt werden, um die gesamte Höhe und Breite des Elements 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 dem 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.

Beispiel CSSdiv {
/* 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.