Stil mit {stil}

Nov 2008

Box Model padding • Abstand von Inhalten zum umfassenden Element

padding regelt den Abstand von Inhalten gegen das umfassende Element und zählt zusammen mit border mit bei der Berechnung der Breite eines Blocks.

p.paddingbox {
  width: 250px;
  background: url(bilder/raster.png);
  border: 25px solid lavender;
  margin: 25px;
  padding: 50px;
}

Der Text ist wie in der Stil-Deklaration angegeben 250 Pixel breit. Dazu kommt ein padding von 50 Pixeln an allen Seiten und ein border von 25 Pixeln an allen Seiten: Der Kasten muss also einen Raum von 400 Pixeln einnehmen: 250 Pixel Breite + 2 • 50 padding (rechts und links) + 2 • 25 Pixel border (rechts und links).

Die Höhe ist nicht so leicht zu bestimmen – sie richtet sich nach dem Inhalt der Box und nach der Einstellung der Schriftgröße im Browser.

Mit Internet Explorer 5 sah der Benutzer hier noch eine schmale Textbox mit einer Breite von 225 Pixel: Schuld war der Boxfehler. IE 5 hat padding und border in die Breite der Box eingerechnet: also: 250 Pixel Breite incl. padding und border. So hat der Text nur noch 250 (Breite) - 2 • 50 (padding) - 2 • 25 = 100 Pixel Raum in der Breite.

Internet Explorer 6 stellt die Box in der richtigen Größe dar, wenn ein korrekter Doctype für das Dokument notiert ist.

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

padding-top | padding-right | padding-bottom | padding-left

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein

padding-top

gibt den Abstand (Rand) zwischen dem Element und dem oberen Rahmen (border-top) an.

padding-right

gibt den Abstand (Rand) zwischen dem Element und dem rechten Rahmen (border-right) an.

padding-bottom

gibt den Abstand (Rand) zwischen dem Element und dem unteren Rahmen (border-bottom) an.

padding-left

gibt den Abstand (Rand) zwischen dem Element und dem linken Rahmen (border-left) an.

Werte

length | percentage

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 (Prozentsatz)

basiert auf der vollen Elementhöhe, die als 100% definiert ist.

zurück zum Seitenanfang