padding

Ü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).

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

Browserkompatiblität

Siehe auch

• CSS Boxmodell