Le modele des boites de CSS decrit les boites generees pour les elements HTML. Il contient egalement des options detaillees pour l'ajustement des marges, des bordures, des espacements et du contenu de chaque element. Le diagramme suivant montre la structure du modele des boites :
L'illustration ci-dessus peut sembler tres theorique, essayons-donc d'utiliser le modele dans un cas reel avec un titre et du texte. Le code HTML de notre exemple est le suivant (d'apres la Declaration universelle des droits de l'homme) :
<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
En ajoutant de la couleur et des informations de police, l'exemple pourrait se presenter comme suit :
L'exemple contient deux elements : <h1> et <p>. On peut illustrer le modele de boites
des deux elements de la facon suivante :
Quoique cela puisse sembler un peu complique, le schema montre chaque element HTML entoure par des boites. Des boites que nous pouvons ajuster avec CSS.
Cette lecon introduisait le modele des boites. Dans les trois lecons suivantes, nous etudierons la creation et le controle des elements dans le modele des boites.