Das CSS-Box-Modell

In CSS werden Elemente wie Absatzformatierungen oder Grafiken etc. wie rechteckige Kästen gehandhabt. Diese "Kästen" haben eine Reihe von Attributen bzw. Eigenschaften, auf die durch CSS Einfluss genommen werden kann. Das Zusammenspiel dieser verschiedenen Eigenschaften nennt man "Box-Modell".

Die Elemente einer solchen Box bestehen aus:

1. dem eigentlichen Inhalt (Text, Grafik, etc.)
2. dem Außenabstand um den Inhalt herum (margin)
3. dem Rahmen  (border)
4. dem Innenabstand von Inhalt zum Rahmen (padding).

In der Übersicht sieht dies folgendermaßen aus:

Die mit width und height angegebene Größe eines Objekts bezieht sich auf die Abmessung des Inhalts OHNE Innenabstand, Rahmen und Außenabstand. Um also die totale Abmessung zu erhalten, müssen alle vier Werte addiert werden.
 

 
Rahmen

border-style
Es gibt eine Reihe von Rahmenformen, die mittels CSS als Wert von border-style angegeben werden können. Zum Anzeigen eines Randes muss diese Eigenschaft eingesetzt werden, da sonst der Rahmen durch den Standardwert none nicht angezeigt wird.

Werte:
none (ausgeschaltet)
solid (durchgehende Linie)
double (doppelte Linie)
dotted (gepunktete Linie)
dashed (gestrichelte Linie)
groove (3-D-Effekt)
ridge (3-D-Effekt, Umkehrung von groove)
inset (oben und links wird ein dunklerer Farbwert verwendet)
outset (unten und rechts wird ein dunklerer Farbwert verwendet)

Standardwert: none
Vererbung: nein
Element: alle Elemente

Beispiel:

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

Falls gewünscht kann jeder der Rahmenseiten ein eigener Stil zugeordnet werden, hierbei wird der Rahmen in vier Segmente aufgesplittet und dem Segment ein eigener Wert zugeordnet.

border-top-style: solid;
border-bottom-style: dotted;
border-left-style: none;
border-right-style: none;

und dies sieht dann so aus:

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

Demo: in sprachen_des_web_1.html <div> in SMIL mit Klasse "bsp" auszeichnen, in demodatei.css eingeben:
border-style: dashed;

border-width

Jedem Element kann ein Rahmen zugeordnet werden. Die Stärke des Rahmens wird über die Eigenschaft border-width angegeben.

Werte :
thin (~2 Pixel)
medium (~4 Pixel)
thick (~6 Pixel)
Zahlenwerte, standardmäßig in Pixel

Vererbung: nein
Element: alle Elemente

Beispiel:

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

Auch hier kann wieder für jede Kastenseite ein eigener Stärkewert angegeben werden:
border-top-width: 9px
border-bottom-width: 2px
border-left-width: 6px
border-right-width: 6px

demo: border-width: 1px;

border-color

Der Farbwert eines Rahmens wird mit border-color angegeben.

Werte :
wie bei allen Farbangaben in CSS, z.B. Hexadezimalwerte

Standardwert: abhängig vom Browser
Vererbung: nein
Element: alle Elemente

Beispiel:

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

Auch hier kann wieder für jede Kastenseite ein eigener Farbwert angegeben werden:
border-top-color: #00ff00
border-bottom-color: #ff0000
border-left-color: #0000ff
border-right-color: #ff00ff

demo: border-color: #CC3300;

 
Innenabstand

Zur Einstellung des Abstands zwischen Inhalt und Rahmen wird die Eigenschaft padding verwendet:

{padding: 20px}

Werte:
feste Zahlenwerte, standardmäßig in Pixel (es dürfen nur positive Werte angegeben werden)
relative Prozentwerte (abhängig zum Browserfenster)

Standardeinstellung: 0px
Vererbung: nein
Element: alle Elementen

Beispiel:
div {border-style: solid; padding: 40px}

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

demo: padding: 10px;
 

 
Außenabstand

Der Abstand zwischen Rahmen und Umgebungsobjekten wird durch die Eigenschaft margin definiert:

{margin: 40px}

Werte:
feste Zahlenwerte, standardmäßig in Pixel (es dürfen auch negative Werte angegeben werden)
relative Prozentwerte (abhängig zum Browserfenster)

Standardeinstellung: 0
Vererbung: nein
Element: alle Elemente

Beispiel:
div {border-style: solid; margin: 20px}

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

Interessant wird die Anwendung von margin in Kombination mit Listen, da hier die Einrückung verändert werden kann:

Beispiel:
ul {margin-left: -40px; margin-top: -10px; color: #666666}

• 5 Säcke Kartoffeln
• eine Palette Rüben
• 10 Kohlköpfe
• eine Kiste Radischen

demo: margin: 20px;