Browserabhängige Interpretation von Margin, Border, Padding und Width

Laut Spezifikation CSS1 des W3C gilt: Zuerst kommt der äußere Rand (Margin), dann der Rahmen (Border), dann der innere Rand (Padding) und dann erst die Elementfläche, deren Breite (Width) und Höhe (Height) festgelegt werden kann. Dies ist in der Abbildung dargestellt. Ob das sinnvoll ist, sei mal dahingestellt, aber einge Browserhersteller scheinen damit nicht einverstanden zu sein. In den folgenden Beispielen wird der äußere Rand immer weiß, der Rahmen blau und der innere Rand, wie auch die Elementfläche, grau dargestellt.

Mozilla-basierte Browser (z.B. Firefox) machen es genau so, wie das W3C es will (simuliert mit Tabellen):

Breite 300px
Dies ist die Elementfläche, welche Text oder beliebige andere Inhalte enthalten kann.

Microsofts Internet Explorer und Opera (sowie sicherlich einige andere Browser) interessiert die W3C-Spezifikation offenbar nicht, denn diese Browser zeichnen den Rahmen und den inneren Rand innerhalb der Fläche ein, welche mit Breite und Höhe abgesteckt wird, was dann so aussieht (simuliert mit Tabellen):

Breite 300px
Dies ist die Elementfläche, welche Text oder beliebige andere Inhalte enthalten kann.

Damit man trotzdem ein einheitliches Bild bekommt, ist man wiedermal auf einen Workaround angewiesen, der im Folgenden gezeigt wird. Vorher sehen wir aber erst den Beweis, dass das vorhin erläuterte Problem tatsächlich existiert:

DIV mit Klasse mbp (funktioniert in Mozilla)

Breite 300px
Dies ist die Elementfläche, welche Text oder beliebige andere Inhalte enthalten kann.

Anmerkung: Microsoft Internet Explorer Version 6 und aktuelle Opera-Versionen machen es vom DOCTYPE, genauer gesagt der verwendeten (X)HTML-Version abhängig, wie das CSS interpretiert wird. Falls Sie also z.B. den aktuellen Internet Explorer verwenden und bemerken, dass die Box korrekt angezeigt wird, liegt es daran, dass diese Seite in XHTML geschrieben ist.

Quellcode:

...
<style type="text/css">
<!--
    *.mbp
    {
        margin: 20px;
        border: 20px solid blue;
        padding: 20px;
        background-color: silver;
        width: 300px;
        height: 150px;
    }
-->
</style>
...
<div class="mbp">Dies ist die Elementfläche, welche Text oder beliebige
    andere Inhalte enthalten kann.</div>
...

Wie man sieht ist dies vom Quellcode her eine elegante Variante, aber es nützt ja nichts, wenn sie nicht in allen Browsern funktioniert :-(

Mehrere DIVs mit Klassen m, b und p (funktioniert in allen Browsern)

Breite 300px
Dies ist die Elementfläche, welche Text oder beliebige andere Inhalte enthalten kann.

Quellcode:

...
<style type="text/css">
<!--
    *.m /* äußerer Rand */
    {
        margin: 20px;
        padding: 0;
        width: 380px;
        height: 230px;
    }
    *.b /* Blauer Rahmen und innerer Rand */
    {
        margin: 0;
        border: 20px solid blue;
        padding: 20px;
        background-color: silver;
    }
    *.p /* Elementfläche */
    {
        margin: 0;
        padding: 0;
        width: 300px;
        height: 150px;
    }
-->
</style>
...
<div class="m">
    <div class="b">
        <div class="p">Dies ist die Elementfläche, welche Text oder beliebige
            andere Inhalte enthalten kann.</div>
    </div>
</div>
...

Wenngleich der Quellcode hier mächtig aufgeblasen wird, ist diese Variante Browserunabhängig und damit notwendig.

Lösung über einen Hack

Es gibt auch diverse Versuche, den Internet Explorer mit manipulierten CSS-Stylesheets zu überlisten. Eine gute Zusammenfassung (auf englisch) bietet Community MX unter der Überschrift The Box Model Problem. Ich möchte aber darauf hinweisen, dass die Anwendung eine Hacks nicht standardkonformes CSS hervorbringt und zukünftige Browsergenerationen damit Probleme haben könnten.

Ihre Erfahrungen, Meinungen, Lösungen

Falls Sie eigene Erfahrungen (z.B. weitere Browser, die W3C-kompatibel arbeiten oder eben nicht) oder Ihre Meinung zu dem geschilderten Problem und der vorgeschlagenen Lösung mitteilen möchten oder eine andere Lösung kennen, würde ich mich über eine E-Mail von Ihnen freuen.

Navigation: Zurück zu Tipps & Tricks

©2005 Michael Berthold, letzte Änderung am 31.08.2005