Die paddingEigenschaft in CSS definiert den innersten Teil des Boxmodells und schafft Platz um den Inhalt eines Elements innerhalb definierter Ränder und / oder Grenzen.
Füllwerte werden mit Längen oder Prozentsätzen festgelegt und können keine negativen Werte akzeptieren. Der Anfangs- oder Standardwert für alle Auffüllungseigenschaften ist 0.
Hier ist ein einfaches Beispiel:
.box ( padding: 0 1.5em 0 1.5em; )Im obigen Beispiel wird die paddinghier gezeigte Shorthand-Eigenschaft verwendet, die bis zu vier Werte akzeptiert:
.box ( padding: || || || )Wenn weniger als vier Werte festgelegt sind, werden die fehlenden Werte basierend auf den definierten Werten angenommen. Beispielsweise würden die folgenden zwei Regelsätze identische Ergebnisse erzielen:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Wenn also nur ein Wert definiert ist, werden alle vier Auffüllungseigenschaften auf denselben Wert gesetzt:
.box ( padding: 20px; )Wenn drei Werte deklariert sind, ist dies der Fall padding: (top) (left-and-right) (bottom);.
Jede der einzelnen Auffüllungseigenschaften kann mit Langschrift 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; )Polsterung und Berechnung der Elementbreite
Wenn ein Element eine bestimmte Breite hat, erhöht jede Auffüllung, die diesem Element hinzugefügt wird, die Gesamtbreite des Elements. Dies ist häufig ein unerwünschtes Ergebnis, da die Breite eines Elements bei jeder Anpassung der Polsterung neu berechnet werden muss. (Beachten Sie, dass dies auch bei der Höhe der Fall ist. In den meisten Fällen wird jedoch bevorzugt, einem Element keine festgelegte Höhe zuzuweisen.)
Zum Beispiel:
.box ( padding: 20px; width: 400px; )In diesem Beispiel .boxbeträgt die tatsächlich gerenderte Breite des Elements auf der Seite 440 Pixel , obwohl dem Element eine explizite Breite von 400 Pixel zugewiesen wurde. Dies berücksichtigt nicht nur die 400 Pixel Breite, sondern auch die 20 Pixel der linken Polsterung und die 20 Pixel der rechten Polsterung (im vorherigen Beispiel mit der Kurzform "Polsterung" definiert).
Dies geschieht, um 400 Pixel Inhaltsbereich anstelle von 400 Pixel Gesamtelementbreite beizubehalten. Hier ist ein Stift, der dies demonstriert:
Dies tritt in allen verwendeten Browsern im Standardmodus auf, jedoch nicht in IE6 und IE7 im Mackenmodus (dh auf Seiten, die in IE6 oder IE7 angezeigt werden, auf denen kein Doctype deklariert ist oder bei denen etwas anderes passiert, um Macken auszulösen Modus).
Um dieses Problem zu beheben und die Breite unabhängig von der Polsterung bei 400 Pixel zu halten, können Sie die folgende box-sizingEigenschaft verwenden:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Dies bewirkt, dass das Element seine Breite beibehält, während der Abstand vergrößert wird, wodurch der verfügbare Inhaltsbereich verringert wird. Hier ist eine Demonstration:
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Ja | Ja | Ja |