Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Übersicht

Die padding Eigenschaft ist eine Kurzform für die Innenabstände aller vier Seiten eines Elementes. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente außer table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column. Auch anwendbar auf ::first-letter.
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • padding-bottom: der Prozentwert wie angegeben oder die absolute Länge
  • padding-left: der Prozentwert wie angegeben oder die absolute Länge
  • padding-right: der Prozentwert wie angegeben oder die absolute Länge
  • padding-top: der Prozentwert wie angegeben oder die absolute Länge
Animierbarja, als Längenangabe
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

padding:   [ <Längenangabe> | <Prozentzahl> ] {1,4} | inherit

Werte

Es werden bis zu vier der folgenden Werte akzeptiert:

<Längenangabe>
Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.
<Prozentzahl>
Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.
inherit
Der Wert des Elternelements wird geerbt.
Ein Wert
Gilt für alle vier Seiten.
Zwei Werte
Der erste Wert bestimmt die oberen und unteren Abstände, der zweite Wert legt die Abstände rechts und links fest.
Drei Werte
Der erste Wert bestimmt den oberen Abstand, der zweite Wert legt die Abstände für rechts und links zusammen fest und der dritte Wert bestimmt den unteren Abstand.
Vier Werte
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.

Beispiele

padding: 5%;                /* 5% Abstand auf allen Seiten */

padding: 10px;              /* 10px Abstand auf allen Seiten */

padding: 10px 20px;         /* oben und unten 10px */
                            /* links und rechts 20px */

padding: 10px 3% 20px;      /* oben 10px */
                            /* links und rechts 3% */
                            /* unten 20px */

padding: 1em 3px 30px 5px;  /* oben 1em */
                            /* rechts 3px */
                            /* unten 30px */
                            /* links 5px */

border:outset; padding:5% 1em;

Livebeispiel

HTML Inhalt

<h4>Hallo Welt!</h4>
<h3>Der Innenabstand ist in dieser Zeile anders.</h3>

CSS Inhalt

h4 {
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3{
  background-color: blue;
  padding: 400px 50px 50px 400px;
}

Spezifikationen

Spezifikation Status Kommentar
CSS Basic Box Model
Die Definition von 'padding' in dieser Spezifikation.
Arbeitsentwurf keine Änderung
CSS Level 2 (Revision 1)
Die Definition von 'padding-top' in dieser Spezifikation.
Empfehlung keine Änderung
CSS Level 1
Die Definition von 'padding' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browserkompatiblität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: fscholz, Sebastianz, SJW, Yuichiro, Jürgen Jeka, Michael2402
 Zuletzt aktualisiert von: fscholz,