Nov 2014

CSS padding

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

Das Polster – padding –, zeigt die gleiche Hintergrundfarbe wie das Element. margin, der äußere Rand, bildet den Einzug des Elements gegen den umgebenden Block. Dazwischen liegt der Rahmen, border.

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

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.

.box1 { width:292px; 
        border:4px solid #E9ECDE;
        margin:10px auto }

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

CSS margin wird hingegen in positionierten Boxen eingesetzt, um die Layout-Elemente der Seite auf Abstand voneinander zu halten.

box-sizing

Die Breite von padding und border zählt mit zur Breite eines Elements. margin bleibt bei der Berechnung der Breite eines Elements im wahrsten Sinne außen vor und wird nicht mitberechnet.

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

Fünf Eigenschaften sind für den inneren Rand - padding - definiert, dabei ist padding die Kurznotationfür alle Eigenschaften:

[ padding ]
padding-top padding-right padding-bottom padding-left

Erblich: Nein

padding: padding ist eine Kurzschrift für die zuvor aufgeführten Eigenschaften und schreibt alle vier Eigenschaften in einer Deklaration.
Werte: [ length | percentage ] {1,4}

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

{1,4}: Sie können eine, zwei, drei oder vier Breiten angeben:

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 Breitenangaben 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).
percentage: percentage (Prozentsatz) basiert auf der vollen Elementhö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 }