Boxmodel
Das Drumherum
Ob Titel, Text oder Container, man muss sich alles als eine Box vorstellen. Die Box kann eine Ausdehnung haben eine Margin (Aussenabstand), einen Rahmen und ein Padding (Innenabstand).
width height
Um den Platzbedarf des Textes herum läuft, durch einen Innenabstand (padding) getrennt, ein Rahmen (border) mit einer gewissen Dicke.
Die Massangaben für Breite und Höhe werden von Browsern unterschiedlich interpretiert:
Netscape Engines wie FireFox deuten sie korrekt als Grössenangabe nur vom Text
bzw. Inhalt und zählen Innenabstand und Rahmen dann noch dazu.
Alte IE und solche im Quircksmode deuten sie als Totalangabe von Text + Padding + Rahmen.
Eine Box (div container) mit Massangaben in der Breite von width="100px", padding="20px" und border="5px"
misst im FF als Total 150px was im Bezug zum W3C-Standart korrekt war und ist (für dieses Totalmass gibt es aber im Boxmodell keine Bezeichnung).
Im IE Quirksmode jedoch bleibt das Total von width="100px" bestehen (!) auf Kosten der Textbreite, welche nach Abzug von padding="20px" und border="5px"
(auf beiden Seiten) nur noch 50px breit ist (für diese Inhaltsbreite gibt es im IE keine Bezeichnung).
Zusätzlich gibt es in beiden Modellen noch einen Aussenabstand (margine). margine="10px" lässt die Box im FF auf total 170px, im IE auf 120px wachsen.
Margins werden also durch beide Browser gleich interpretiert; wollte man auf der sicheren Seite sein, könnte man einfach auf padding und border ganz verzichten.
Wenn obige CSS-Box die selbe Grösse wie das untige Pixelbild hat, dann ist alles gut.
#modelbox {
width: 100px; padding: 20px; border:solid green 5px; margin: 10px;
height: 50px; background-color:#c0ffa0;
}
Schreibweise der Massangaben
padding
Der Innenabstand (Padding oder Polster) ist der Abstand des Inhalts eines Elements zur inneren Kante seines Rahmens.
Einzelangaben lassen sich so machen: padding-top="20px", padding-right="0", padding-botom="0", padding-left="0".
Als verkürzte Schreibweise lassen sich alle Angabe in einem Attribut machen; bei 4 Wertangaben gilt jede Angabe für eine Seite, wobei im Uhrzeigersinn drehend oben begonnen wird:
padding="20px 0 0 0" (ohne Kommas oder sonstige Trenner)
Nur eine Wertangabe gilt für alle vier Seiten.
Bei 2 Wertangaben gilt die erste für oben und unten, die zweite für links und rechts.
Bei 3 Wertangaben gilt die erste für oben, die zweite für links und rechts, die dritte für unten.
margin
Der Aussenabstand (margin) ist der Raum von der Aussenkante des Rahmens eines Elements zu seinem benachbarten oder übergeordneten Element.
Der Aussenabstand eines Elements addiert sich mit dem Aussenabstand eines benachbarten Elements und mit dem Padding eines übergeordneten Elements, welches dieses Element beinhaltet.
Alle Elemente können Margins haben, einige Elemente haben schon Margins vorgegeben, auch wenn man nichts schreibt,
Absätze <p>...</p> und Titel erzeugen automatisch nach sich einen Zwischenraum zum nächsten Absatz, diese Abstände können zurückgesetzt werden.
Einzelangaben lassen sich so machen: margin-top="20px", margin-right="0", margin-botom="0", margin-left="0".
Als verkürzte Schreibweise lassen sich alle Angabe in einem Attribut machen; bei 4 Wertangaben gilt jede Angabe für eine Seite, wobei im Uhrzeigersinn drehend oben begonnen wird:
margin="10px 0 0 0" (ohne Kommas oder sonstige Trenner)
Nur eine Wertangabe gilt für alle vier Seiten.
Bei 2 Wertangaben gilt die erste für oben und unten, die zweite für links und rechts.
Bei 3 Wertangaben gilt die erste für oben, die zweite für links und rechts, die dritte für unten.
Der Body hat auch einen vorgegebenen Margin (das ist quasi das Padding des HTML Elements oder des Browserfensters),
in den verschiedenen Brausern wird die Boddy-Margine sogar unterschiedlich angesprochen um sie zu eliminieren:
Für InternetExplorer sind die Attribute leftmargin="0px" topmargin="0px",
für den NetscapeNavigator/Firefox sind sie marginwidth="0px" marginheight="0px". Das Bodytag sah dann so aus:
<leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
Ihre grosse Bedeutung hatten diese Attribute, als die Seitenelemente gänzlich durch Tabellen und aufgezogene single.gif positioniert wurden.
Bilder und Tabellen haben keine vorgegebenen Aussenabstände; bei Tabellenzellen spricht man vom 'cellspacing' statt von Margin.
border
Analog zu Padding und Margin macht man Massangaben zum Rahmen (border). Ein Element, welches einen vorgegebenen Rahmen hat, sind Bilder in einem Link.
Der Rahmen ist blau und 1px dick, im Stylesheet wird darum oft der Rahmen auf Null zurückgesetzt img { border:0; }
Mehr zu Doctype und Quirksmode und wie man verhindert, das der IE in den Quirksmode schaltet.
Check den Code.