Frage stellen
CSS-Boxmodell
Das sogenannte CSS-Boxmodell beschreibt wie sich die Elementgrenzen eines Blockelementes (z. B. div, p oder h1) in Bezug auf Außenrand und Innenrand berechnen lassen, bzw. verhalten. Dies ist auch wichtig in Kombination mit Hintergründen (siehe Teil V des CSS-Kurses).
Grundsätzliches
Das CSS-Boxmodell läßt sich wie der Name schon sagt wie ineinander verschachtelte Boxen vorstellen, welche sich jeweils umschließen. Es werden dabei folgende Lagen unterschieden: Der Elementinhalt selbst, der Innenabstand, der Rahmen und der Außenabstand. Leider hatten die ersten Versionen des MS Internet Explorers, welche die entsprechenden CSS-Eigenschaften interpretieren konnten (konkret die Versionen 5.0 und 5.5) ihre eigenen Vorstellungen wie die Innen und Außenabstände zu berechnen sind, welche nicht mit dem W3C Standard übereinstimmten. Da Microsoft hier seit Version 6.0 nachbessern wollte, hat Microsoft selber einen Schalter eingeführt, der zwischen standardkompatiblen Modus und alten Modus der Internet Explorer Versionen 5.0 und 5.5, umschalten kann. Als "Schalter" dient hierbei die Angabe des Doctypes oberhalb des Kopfes einer HTML-Datei. Nähere Informationen hierzu finden Sie in einem eigenen Artikel.
Außenabstand
Die CSS-Eigenschaft margin bestimmt für ein Blockelement den Außenabstand. Das heißt den Abstand entweder zum Elternelement oder zu einem Nebenstehenden Element. Für Nebenstehende Elemente gilt, daß die jeweiligen Außenabstände beider Elemente miteinander verrechnet werden. Hat ein Element beispielsweise einen Abstand nach Links von 15px und Links daneben ein Element einen Abstand nach rechts von 20px definiert, beträgt der tatsächliche Abstand zwischen beiden 20px. Diese Verrechnung wird ebenfalls auf den Innenabstand zu einem Elternelement durchgeführt. Als Wertangabe ist eine nummerische Angabe erlaubt. Als Maßeinheit können beispielsweise mm (Millimeter), cm (Zentimeter), px (pixel), pt (Punkt), em (bezug auf die Schriftgröße des Elementes) oder ex (bezug auf die Höhe eines kleinen x des Elementes) verwendet werden. Um die verschiedenen Abstände nach allen 4 Seiten einzeln bestimmen zu können, gibt es 2 Möglichkeiten: entweder werden nach margin: 4 Werte durch Leerzeichen getrennt notiert, welche jeweils vom oberen Abstand ausgehend die 4 Werte im Uhrzeigersinn abfolgend angeben, oder man greift auf die einzeln differenzierten Funktionen von margin zurück: margin-top (Abstand nach oben), margin-right (Abstand nach rechts), margin-bottom (Abstand nach unten) und margin-left (Abstand nach Links). Ein Beispiel:
div.kasten { margin-left:1em; margin-bottom:0.8em; }
In diesem Beispiel wird also nur ein linker und unterer Außenabstand angegeben. Hier noch ein Beispiel für alle Angaben auf einmal:
div.kasten { margin:35px 15px 20px 15px; }
Falls man auf allen Seiten den gleichen Außenabstand möchte, genügt auch eine einfache Angabe:
p { margin:15px; }
Falls sie den Außenabstand auf das body-Element anwenden: Hier reagieren die Browser unterschiedlich. Manche interpretieren dies als Abstand um den ganzen sichtbaren Inhalt der Datei (z. B. MS Internet Explorer 5.0), während es andere Browser (z. B. Internet Explorer 6.0 im standardkompatiblen Modus) es als Abstand des body-Elementes zu seinem Elternelement, also dem HTML-Element sieht, wodurch dieser Abstand im Browserfenster nicht mehr sichtbar ist. Daher ist es besser, wenn ein einheitlicher Abstand um den Gesamtinhalt erreicht werden soll, diesen als Innenabstand des body-Elementes festzusetzen und den Außenabstand einfach auf 0 zu setzen. Eine andere Möglichkeit ist auch noch alle Abstände des body-Elementes auf 0 zu setzen und um den Gesamtinhalt ein div-Tag zu legen, für welchen dann einfach ein Außenabstand definiert wird.
Innenabstände
Innenabstände werden in CSS mit der Eigenschaft padding definiert. Auch hier gibt es dieselben Möglichkeiten wie bei margin die Abstände zu den 4 Seiten hin seperat festzulegen. die entsprechenden Einzeleigenschaften heißen: padding-top (nach oben), padding-right (nach rechts), padding-bottom (nach unten) und padding-left (nach links). Für die Wertzuweisungen gelten ebenfalls die gleichen Regeln wie bei den Außenabständen. Innenabstände spielen vor allem dann eine Rolle, wenn Hintergrundfarben oder Hintergrundbilder oder Rahmen verwendet werden, damit der Elementinhalt nicht an den Rändern "anklebt". Ein Beispiel:
div.kasten { margin:1em; background-color:#99CC66; padding:10px; }
In diesem Beispiel werden also gleich Außenabstand, Hintergrundfarbe und Innenabstand definiert. Das ganze kann dann so aussehen:
Dieser Absatz wurde gebildet mit der Angabe: <p style="margin:1em; background-color:#999966; padding:10px;">...</p>
Rahmen
Rahmen liegen im CSS-Boxmodell zwischen den Innen- und den Außenabständen und werden durch mehrere CSS-Eigenschaften gebildet: border-width (Rahmenbreite), border-style (Rahmenart) und border-color (Rahmenfarbe). Die Rahmendicke border-width muß einen nummerischen Wert für eine Dickenangabe haben. Üblich ist die Verwendung der Maßeinheit px (pixel), aber es können auch andere in CSS mögliche Maßangaben verwendet werden. Für die Rahmenart sind folgende Wertzuweiungen möglich: solid (einfache durchgezogene Linie), double (doppelte Linie), dotted (gepunkted, wird vom Internet Explorer genauso interpretiert wie dashed), dashed (gestrichelt), none (kein Rahmen), hidden (unsichtbarer Rahmen), groove (3D-Effekt), ridge (3D-Effekt), inset (3D-Effekt) und outset (3D-Effekt). Für border-color sind Farbangaben nach den in HTML üblichen Hexadezimalen Werten möglich. Auch für die Rahmen ist eine Differenzierung nach oben, unten, rechts, links möglich. Dafür sind nur die Schlüsselwörter top, bottom, left und right in die Mitte der CSS-Eigenschaften einzufügen: border[-top, -left, -right, -bottom]-width etc. Nun noch ein vollständiges Beispiel:
div.kasten { margin:2em; background-color:#999966; border-style:ridge; border-width:3px; padding:10px; }
So etwas kann dann z. B. so aussehen:
Dieser Absatz wurde mit der Angabe: <p style="margin:2em; background-color:#999966; border-style:ridge; border-width:4px; border-color:#003300; padding:10px;">...</p> gebildet.