CSS padding | mediaevent.de

padding ist das Polster für den Inhalt

Das Boxmodell definiert CSS padding als inneren Abstand oder Polster, einen Rahmen (border) und einen äußeren Rand (margin) um das Element.

margin, der äußere Rand, bildet den Einzug des Elements gegen den umgebenden Block. Dazwischen liegt der Rahmen, border.

Box-Modell mit padding, margin und border

Obwohl wir dem Element mit width eine Breite zuweisen, zählt am Ende die Breite von padding und border mit zur Breite des Elements – das ist nicht intuitiv und nicht immer erwünscht. Bei jeder Änderung von padding / border muss die Gesamtbreite des Elements neu berechnet werden.

Wenn durch CSS border ein sichtbarer Rahmen um ein Element gesetzt ist, würde der Inhalt bis zum Rahmen laufen und stören (es sei denn, der Rahmen liegt um ein Bild).

Hat der Block eine Hintergrundfarbe oder ein Hintergrundbild, passiert dasselbe: Der Inhalt läuft bis an den Rand.

CSS padding wird z.B. für Tabellenzellen mit sichtbarem Rahmen einsetzt, damit der Text nicht bis zum Rahmen läuft.

padding ist das Polster nach oben / unten oder zu den Seiten

Raum im Layout

Gesamtbreite mit padding und border — Gesamtbreite mit border und padding

BL border-left
PL padding-left
BL border-right
PL padding-right

Platzbedarf im Layout = BL + PL + width + PR + BR

.box1 { width:272px;
        border:4px solid silver;
        margin:10px auto }

.box2 { width:252px;
        padding:10px; 
        border:4px solid silver;
        margin:10px auto }

Das gilt zwar auch für die Höhe des Elements, aber meist ist die Breite der kritische Faktor beim Positionieren der Layoutblöcke.

CSS margin wird hingegen in positionierten Boxen eingesetzt, um die Layout-Elemente der Seite auf Abstand voneinander zu halten, bleibt im wahrsten Sinne des Wortes außen vor und zählt nicht zur Gesamtbreite (bzw. -höhe)

box-sizing

Was auch immer die Standards sich bei dieser Regel gedacht haben … CSS box-sizing: border-box macht die Berechnung der Abmessungen einer HTML-Box mit padding und border intuitiver.

Mit box-sizing rendert der Browser den HTML-Block nur mit width.
border und padding liegen innerhalb der HTML-Box.

.box3 { width:300px; 
        box-sizing:border-box;
        border: 4px solid #E9ECDE; 
        padding:10px; margin:10px auto }

padding Syntax

padding kann keine negativen Werte annehmen, derer Mindestwert für padding ist also 0. padding kann für jede Seite des Elements angegeben werden: padding-top, padding-right, padding-bottom und padding-left. Darüber hinaus gibt es die Kurzformen: padding: 1em schreibt alle vier Eigenschaften in einer Deklaration.

1 Wert — Wird für padding ein Wert angeben, werden alle vier Seiten in dieser Breite gerendert.

length: length kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), ch, rem, pt (Punkt), px (Pixel)
percentage: percentage (Prozentsatz) basiert auf der vollen Elementbreite bzw. -höhe, die als 100% definiert ist.

padding: 4px; 
          |
          +----> padding-top, padding-right, padding-bottom, padding-left
          
padding: 4px 8px;
          |   |
          |   +----> padding-right, padding-left
          |
          +----> padding-top, padding-bottom

padding: 4px 8px 12px; 
          |   |    |
          |   |    +----> padding-bottom
          |   |
          |   +----> padding-right, padding-left
          |
          +----> padding-top
          
padding: 4px 8px 12px 16px; 
          |   |    |    |
          |   |    |    +----> padding-left
          |   |    |
          |   |    +----> padding-bottom
          |   |
          |   +----> padding-right
          |
          +----> padding-top

padding mit Prozent-Werten

CSS padding hat einen kleinen, wenig intuitiven Seitenhieb. Wenn padding mit Prozentwerten notiert wird, basiert es nicht auf der Breite des Elements, sondern auf der Breite des umfassenden Elements.

<div class="wrapper">
	<div class="paddingbox"></div>
</div>

.wrapper { width: 300px; background: lavender; }

.paddingbox { width:200px; height:150px; padding:5%; background: ivory; }

Statt wie erwartet wird die Box von 200px Breite mit einem padding von 5% nicht 200px + 2 ✕ 10px breit, sondern 200px + 2 ✕ (5% von 300) = 230px.

Und die Höhe der Box wird nicht 160px + 2 ✕ 8px hoch, sondern 160px + 2 ✕ (5% von 300) = 190px.

Schräg? Ja. Aber diese eigenwillige Konstellation löst das Problem mit dem CSS für Videos in einem iframe.

Damit sich das iframe-Element an die Größe des Viewports bzw. Containers anpasst, geben wir dem Container die gewünschte Breite. Die Höhe ergibt sich aus dem Padding, um das Seitenverhältnis oder Aspekt Ratio des iframes zu erhalten.

Das Padding von 56.25% entspricht dem Seitenverhältnis 16:9.

padding für Tabellenzellen

Tabellen hatten in den ersten Versionen noch ein individuelles Attribut cellpadding, damit der Inhalt der Tabellenzelle Abstand vom Rand der Zelle halten konnte. Das erledigt heute das normale CSS padding.

td, th { padding: 1em }