Das CSS Box- Modell erklärt

Hier siehst du das CSS BOX Modell in Aktion.
Zur besseren Visualisierung wurden die Absätze und die Tabelle grau hinterlegt.

Dieses Beispiel ist Teil des Artikels "Schöne Website- Designs mit CSS und ohne Tabellen!!" der auf CatMoney.de veröffentlicht wurde.

Ich bin der Inhalt.
Erklärung:  
Inhalt: Hat eine Breite (width) von 300px und eine Höhe (hight)von 150px.
Rahmen (border): grün und 5px groß, liegt zwischen Innenabstand (padding) und Außenabstand (margin)
Innenabstand (padding): 15px Abstand zwischen dem Rahmen (grün) und dem Inhalt ("Ich bin der Inhalt")
Außenabstand (margin): 25px Abstand zwischen dem Rahmen (grün) und dem oberen <p>-Tag und der unteren Tabelle

So sieht der entsprechende CSS- Code aus:
div#css_box_model {
/*Inhalt*/
width:300px;
height:100px;
background-color:#FFFFFF;

/*Rahmen*/
border-top:5px solid #00FF00;
border-right:5px solid #00FF00;
border-bottom:5px solid #00FF00;
border-left:5px solid #00FF00;

/ *Innenabstand*/
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;

/*Aussenabstand*/
margin-top:25px;
margin-right:25px;
margin-bottom:25px;
margin-left:25px;
}