CSS-Eigenschaft Padding – Innenabstand festlegen
- Schriftart definieren
- Schriftgröße definieren
- Schriftfarbe definieren
- Textausrichtung
- Text-Dekoration
- Hintergrundfarbe definieren
- Schriftfarbe definieren
- Rahmen – Border
- HTML Farbnamen
- CSS Box-Modell
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- Art der Positionierung: Position
- Art der Darstellung: Display
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- CSS Selektoren
- CSS Maßeinheiten
Inhaltsübersicht CSS Grundlagen
Eigenschaften für Text
Farben und Hintergründe definieren
Grundlagen Box-Modell?
Box-Positionierung
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-top | Innenabstand oben |
| padding-right | Innenabstand rechts |
| padding-bottom | Innenabstand unten |
| padding-left | Innenabstand links |
| Beschreibung | mögliche Werte | Standardwert | Kategorie |
|---|---|---|---|
| Innenabstand (Padding) | Länge [px oder em] Prozent auto initial inherit | 0 | Box-Modell Abstände |
Die »Angabe in oranger Schrift« ist die Standardanwendung dieser CSS-Eigenschaft.
Padding kann für alle vier Seiten (top, right, bottom, left) individuell konfiguriert werden. Der Innenabstand wird meist in px, em oder Prozent angegeben.
- 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.
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«).
Der Padding-Bereich erhält stets die gleiche Hintergrundfarbe wie der Inhaltsbereich.
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>
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.