padding

Die CSS-Eigenschaft padding definiert den innersten Bereich des Box-Modells und erzeugt einen Abstand um den Inhalt eines Elements herum, innerhalb aller definierten Ränder und/oder Rahmen.

Padding-Werte werden mit Längenangaben oder Prozentwerten festgelegt und können keine negativen Werte annehmen. Der anfängliche oder Standardwert für alle Padding-Eigenschaften ist 0.

Hier ist ein einfaches Beispiel

.box {
  padding: 0 1.5em 0 1.5em;
}

Das obige Beispiel verwendet die padding-Kurzschreibweise, die bis zu vier Werte akzeptiert, hier gezeigt

.box {
  padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left>
}</padding-left></padding-bottom></padding-right></padding-top>

Wenn weniger als vier Werte angegeben sind, werden die fehlenden Werte basierend auf den definierten Werten angenommen. Beispielsweise würden die folgenden beiden Regelwerke identische Ergebnisse liefern

.box {
  padding: 0 1.5em;
}

.box {
  padding: 0 1.5em 0 1.5em;
}

Wenn also nur ein Wert definiert ist, werden alle vier Padding-Eigenschaften auf denselben Wert gesetzt

.box {
  padding: 20px;
}

Wenn drei Werte angegeben werden, lautet die Syntax: padding: [oben] [links-und-rechts] [unten];.

Jede der einzelnen Padding-Eigenschaften kann mit Langform deklariert werden, in diesem Fall würden Sie nur einen Wert pro Eigenschaft definieren. Das vorherige Beispiel könnte also wie folgt umgeschrieben werden

.box {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

Padding und Elementbreitenberechnung

Wenn einem Element eine bestimmte Breite zugewiesen ist, wird jedes hinzugefügte Padding zur Gesamtbreite des Elements addiert. Dies ist oft ein unerwünschtes Ergebnis, da die Breite eines Elements bei jeder Anpassung des Paddings neu berechnet werden muss. (Beachten Sie, dass dies auch für die Höhe gilt, aber in den meisten Fällen ist es vorzuziehen, einem Element keine feste Höhe zu geben.)

Zum Beispiel:

.box {
    padding: 20px;
    width: 400px;
}

In diesem Beispiel wird dem Element .box zwar eine explizite Breite von 400 Pixeln zugewiesen, die tatsächliche gerenderte Breite des Elements auf der Seite beträgt jedoch 440 Pixel. Dies berücksichtigt nicht nur die 400 Pixel Breite, sondern auch die 20 Pixel linksseitiges Padding und die 20 Pixel rechtsseitiges Padding (definiert mit der Kurzschreibweise für Padding im vorherigen Beispiel).

Dies geschieht, um 400 Pixel an Inhaltsplatz zu erhalten, anstatt 400 Pixel Gesamtbreite des Elements. Hier ist ein Pen, der dies veranschaulicht

Check out this Pen!

Dies geschieht in allen verwendeten Browsern im Standardmodus, tritt jedoch nicht in IE6 und IE7 im Quirks-Modus auf (d. h. auf Seiten, die in IE6 oder IE7 angezeigt werden, bei denen kein Doctype deklariert ist oder etwas anderes den Quirks-Modus auslöst).

Um dieses Problem zu lösen und somit die Breite unabhängig von der Menge des Paddings bei 400 Pixeln zu halten, können Sie die Eigenschaft box-sizing verwenden

.box {
 padding: 20px;
 width: 400px;
  box-sizing: border-box;
}

Dies bewirkt, dass das Element seine Breite beibehält, während das Padding erhöht wird, wodurch der verfügbare Inhaltsbereich verringert wird. Hier ist eine Demonstration

Check out this Pen!

Verwandte Eigenschaften

• margin
• box-sizing

Weitere Ressourcen

• W3C-Spezifikation
• MDN-Dokumentation
• * { Box-sizing: Border-box } FTW

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Ja	Ja	Ja	Ja	Ja	Ja	Ja