CSS-Eigenschaft: padding, Kategorien: Abstände (allgemein), Box model (CSS 2.1), Basic Box Model (CSS 3)

Beschreibung
Beispiele
Fehler melden

Innenabstand (allgemein)

Steuert den Innenabstand von HTML-Elementen.

CSS-Eigenschaft: padding
Kurzbeschreibung	Werte	Standardwert	Kategorie	Hinweis
Innenabstand (allgemein)	<length> <percentage> inherit	0	Allgemein: Abstände CSS 2.1: Box model CSS 3: Basic Box Model

Verwandte Eigenschaften aus der Kategorie: Abstände (allgemein), Box model (CSS 2.1), Basic Box Model (CSS 3):

Folgendes ist beim Einsatz von padding zu beachten:

padding ist die Kurzschreibweise für Innenabstände und schreibt mit einem Ausdruck die Werte für padding-top, padding-right, padding-bottom und padding-left, und das genau in dieser Reihenfolge. Es können 1 - 4 Parameter angegeben werden.
padding selber steuert dabei den Innenabstand. In der Regel bezieht man die Eigenschaft auf Block-Elemente, aber auch Inline-Elemente können mit einem padding versehen werden. Welchen Effekt das haben kann, sieht man im Beispiel Nr. 5, was so sicherlich nicht gewollt, generell aber möglich ist. Die meisten Beispiele sind von daher mit DIVs dargestellt, da die Auswirkung von padding daran am deutlichstem wird.
padding stellt erst mal kein Problem dar, da hier einfach nur Innenabstände zugewiesen werden. Generell ist das Verhalten im Box-Modell erklärt - wahrscheinlich eines der häufigsten Themen, über das jeder Einsteiger - aber auch erfahrene Webentwickler - stolpern.
Problematisch wird es, wenn padding mit festen Breiten kombiniert wird, was im Beispiel Nr. 9 zu sehen ist:
- Die erste Box hat weder eine Angabe zur Breite, noch zum padding. Ein P-Tag als Block-Element nimmt per Default 100% der Breite ein und damit die - wie hier in auf dieser Beispielseite - 48% von einer weißen Box, in der man Beispieldarstellung, HTML- und CSS-Quellcodedarstellung sieht (48% bezieht sich in der Tat nur auf diese konkrete Webseite hier mit dieser speziellen Beispieldarstellung).
- Für die zweite Box ist ein padding konfiguriert. Über padding: 0px 50px; wird ein padding für oben und unten von 0px, für rechts und links von 50px vergeben. Man sieht, dass sich die Breite, die für den Text bleibt, einrückt. Sprich, die 2 x 50px passen sich zusammen mit dem Inhalt zu 100% ein, die Breite des Inhalts passt sich also variabel an.
- Die dritte Box hat kein padding, aber eine definierte Breit von 150px. Es werden genau diese 150px eingenommen (zuzüglich dem blauen Rahmen).
- In der vierten Box sieht man, wie sich die Gesamtbreite bei gesetzter Breite und gesetztem padding verhält. Die Werte addieren sich, die Box wird insgesamt (150px Breite + 2 * 50px Innenabstand) 250px. Zwei Boxen (die davor und die beschriebene) mit der gleichen zugewiesenen Breite können, in Abhängigkeit vom padding (als auch vom margin und der border) völlig unterschiedliche Flächen einnehmen.
- Im fünften Beispiel sieht man das P-Tag, welches statt auf eine Pixelweite auf 100% gesetzt ist. Linker und rechter Rahmen wurden auf 0 gesetzt, damit das P die 100% ohne Probleme dargestellt werden kann. Die border würde bereits die Gesamtbreite beeinflussen, die Problematik bezüglich der border ist unter border-with beschrieben.
- Im letzten Block wird die eigentliche Problematik deutlich. Das P-Tag hat 100%, und ein linkes und rechts von 25px, die Gesamtbreite wächst also über 100% hinaus. HTML hat an der Stelle nur zwei Möglichkeiten: 1. Wenn die äußere Breite definiert ist, wie auf dieser Seite, überlappt das Block-Element. 2. Flexible Elementen hinter dem betroffenen Element verschieben - wenn Platz ist, einfach weiter nach rechts, wenn nicht in die nächste Zeile.
Erwartet eine bis vier Angaben [1 für alle, 4 für oben| rechts| unten| links]
Werte können absolut in EM, PX usw. oder relativ in % angegeben werden.
Eine Prozentangabe bezieht sich auf die Breite des umgebenden Block-Elements.

Browserunterstützung von padding

Firefox

Google
Chrome

Internet
Explorer

Safari

Opera

CSS21

Version: 16	Version: 25	Version: 30	Version: 31	Version: 32
j

Version: 20	Version: 30	Version: 35	Version: 36	Version: 37
j

Version: 8	Version: 9	Version: 10	Version: 11
j

Version: 4	Version: 5	Version: 6	Version: 7
j

Version: 10	Version: 11	Version: 12
j

Weiterführende Informationen zu padding:

W3C Spezifikation:
http://www.w3.org/TR/css3-box/#padding1

letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
overflow-y
nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
padding-bottom

Beispiele

HTML:

<div>
   <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
</div>

CSS:

div {
   border: 1px solid black;
   background-color: #ccc;
}
div {
   border: 10px solid red;
   min-height: 50px;
   background-color: #FFFF70;
   text-align: justify;
}
/* Ausgangssituation:
zwei verschachtelte DIVs, das äußere ist umgeben von einem 1px breiten Rahmen in schwarz.
Das Innere hat eine Mindest-Höhe von 50px, damit der gelbe Hintergrund sichtbar wird,
die Breite selber richtet sich automatisch am äußeren DIV aus.
Das innere DIV hat einen roten Rahmen, um in den weiteren Beispielen zu zeigen, wo das padding statt findet.
*/
span span,
div span {
   background-color: #00BE5F;
}

Beispiel Nr. 1 So sieht's aus:

Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.

HTML:

<div class="doPx">
   <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
</div>

CSS:

div.doPx {
   padding: 10px;
}

Beispiel Nr. 2 So sieht's aus:

HTML:

<div class="doEm">
   <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
</div>

CSS:

div.doEm {
   padding: 1.8em;
}

Beispiel Nr. 3 So sieht's aus:

HTML:

<div class="doPerc">
   <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
</div>

CSS:

div.doPerc {
   padding: 3%;
}

Beispiel Nr. 4 So sieht's aus:

HTML:

<span class="doSpan">
   <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
</span>

CSS:

.doSpan {
   border: 15px solid red;
}
.doSpan span {
   padding: 5px;
   border: 3px solid yellow;
}

Beispiel Nr. 5 So sieht's aus:

HTML:

<div class="doZwei">
   <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
</div>

CSS:

div.doZwei {
   padding: 5px 40px;
}

Beispiel Nr. 6 So sieht's aus:

HTML:

<div class="doDrei">
   <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
</div>

CSS:

div.doDrei {
   padding: 25px 5% 4em;
}

Beispiel Nr. 7 So sieht's aus:

HTML:

<div class="doVier">
   <span>Hier ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text und ein wenig Text.</span>
</div>

CSS:

div.doVier {
   padding: 15% 10px 5pt 4em;
}

Beispiel Nr. 8 So sieht's aus:

HTML:

<div class="doCompare">
   <p>Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 </p>
   <p class="box2">Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 </p>
   <p class="box3">Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 </p>
   <p class="box4">Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 </p>
   <p class="box5">Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 </p>
   <p class="box6">Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 </p>
</div>

CSS:

div.doCompare p {
   border: 4px solid blue;
}
div.doCompare p.box2,
div.doCompare p.box4 {
   padding: 0px 50px;
}
div.doCompare p.box3,
div.doCompare p.box4 {
   width: 150px;
}
div.doCompare p.box5,
div.doCompare p.box6 {
   width: 100%;
   border-left: 0px;
   border-right: 0px;
   background-color: #80FF00;
}
div.doCompare p.box6 {
   padding: 0px 25px;
}

Beispiel Nr. 9 So sieht's aus:

Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1

Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2

Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3

Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4 Box 4

Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5 Box 5

Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6 Box 6

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

CSS-Eigenschaft: padding, Kategorien: Abstände (allgemein), Box model (CSS 2.1), Basic Box Model (CSS 3)

Innenabstand (allgemein)

Verwandte Eigenschaften aus der Kategorie: Abstände (allgemein), Box model (CSS 2.1), Basic Box Model (CSS 3):

Folgendes ist beim Einsatz von padding zu beachten:

Weiterführende Informationen zu padding:

Beispiele

HTML:

CSS:

Beispiel Nr. 1 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 2 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 3 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 4 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 5 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 6 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 7 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 8 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 9 So sieht's aus:

Fehler melden

CSS-Wiki.com

Kategorien (allgemein)

Kategorien (W3C: CSS 2.1)

Module (W3C: CSS 3)

A-Z:

Schnell­auswahl

Seiten:

Schnellauswahl