Outer-Space
Tipps & Tricks zur Programmierung in HTML

Das Rand- und Rahmenproblem

Die Verwendung von farbigen Feldern und Rahmen ist unverzichtbare Bestandteil bei der Programmierung von Webseiten. Leider liegen hier auch die Ursache vieler Probleme, wenn es darum geht, pixelgenaue Vorgaben zu machen. Die kleinen aber feinen Unterschiede sind am praktischen Beispiel sichtbar.

(Innen-)Breite = 200 Pixel
(Aussen-)Breite = 200 Pixel

Beim ersten Beipiel wird ein einfacher div-Bereich mit Hintergrund definiert und ein Rahmen zugewiesen. Im zweiten Fall handelt es sich um eine Lösung in Form eines Aussen- und Innencontainers unterschiedlicher Farbe und einem Abstand von 1 Pixel des inneren Containers.

<div style="width:200px; background-color:#CCC; border:1px solid #000;">
(Innen-)Breite = 200 Pixel</div>
<div style="width:200px; background-color:#000; padding:1px 0;">
<div style="background-color:#CCC; margin:0 1px;">
(Aussen-)Breite = 200 Pixel</div></div>

Beim reinen Randproblem handelt es sich um einen bekannten Fehler (bug) älterer Versionen des Internet Explorer, der einem definierten Feldbereich den gleichsam zugewiesenen Innenabstand (padding) nicht der definierten Breite zuaddiert, wie es die Spezifikation vorgibt.