CSS padding – innerer Abstand zum Rand

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 Abstand (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.

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

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

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>

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: 0.5em }