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.
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.
Raum im Layout
- BL border-left
- PL padding-left
- BL border-right
- PL padding-right
.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.
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 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.
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 kann keine negativen Werte annehmen. Der Mindestwert für padding ist also 0.
- Wird eine Breite angeben, werden alle vier Ränder in dieser Breite dargestellt.
- Werden zwei Breiten angeben, wird der obere und untere Rand mit der ersten Angabe und der rechte und linke Rand mit der zweiten Breite dargestellt.
- Werden drei Breiten angeben, wird der obere Rand mit der ersten, der rechte und linke Rand mit der zweiten und der untere Rand mit der dritten Breite dargestellt.
- Bei vier Werten ist die Reihenfolge top, right, bottom, left.
- 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), pt (Punkt), px (Pixel), em, ex
- percentage
- percentage (Prozentsatz) basiert auf der vollen Elementbreite bzw. -höhe, die als 100% definiert ist.
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 }