Sep 2017

CSS padding

padding ist freier Raum um das Element, zeigt dieselbe Hintergrundfarbe wie das Element und wird mit zur Größe des Elements gerechnet.

padding hält den Inhalt eines Blocks vom Rahmen des Blocks fern. Der Rahmen, border, ist i.d.R. dekorativer Natur und trennt Blöcke optisch.

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.

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

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

Gesamtbreite = width + padding-left + padding-right + border-left + border-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.

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 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 }