Un élément HTML est toujours affiché dans une boîte.

Une boîte est construite avec différents composants, représentés par des propriétés CSS.

Nous allons pouvoir donner des valeurs à ces propriérés pour modifier et individualiser la représentation graphique de la boîte.
Les composants peuvent être regroupés en 4 familles :

• agencement (marges externes margin, bordures border, marges internes padding)
• dimensions (en particulier hauteur height et largeur width)
• position (en particulier position, left, right, top, bottom, )
• visuel (en particulier arrière plan background, police de caractères font, couleur de texte color).

Quelques précisions.

• Les marges internes (padding), situées entre le contenu et la bordure, prennent la couleur de fond du contenu,
• Marges internes (padding) et bordures (border) sont facultatives. Si elles sont omises, elles ont par défaut la valeur 0.
• Les marges externes (margin) sont toujours transparentes et il n'est pas possible de leur donner une couleur ou une image de fond.
• Certains éléments ont des marges externes (margin) prédéfinies par les navigateurs (par exemple body, p, ul, etc). Si les marges externes ne sont pas prédéfinies ou omises, elles ont par défaut la valeur 0.
• Les marges externes (margin) peuvent avoir une valeur négative.

Une page HTML est composée d'un ensemble de boîtes imbriquées les unes dans les autres, suivant le principe des poupées russes.

L'exemple suivant met en valeur les boîtes utilisées dans la page HTML. Les marges sont volontairement grossies pour que les boîtes entourées en rouge soient bien visibles.

L'affichage de l'exemple montre en particulier 3 choses :

• les 2 premières boîtes sont celles faites par les éléments html et body,
• certaines boîtes sont affichées les unes en dessous des autres,
• certaines boîtes sont affichées les unes à côté des autres.

Suivant le mode d'affichage par défaut des éléments HTML, le comportement des boîtes gérées par CSS va être différent pour le positionnement, les alignements, les marges, les imbrications, etc.

Le détail des boîtes de type bloc ou en ligne se trouve dans les spécifications techiques -> éléments HTML

L'exemple suivant entoure en rouge les boîtes bloc et en vert les boîtes en ligne. Les marges sont volontairement grossies pour que les boîtes soient bien visibles.

Dans l'exemple précédent, on peut remarquer que certaines parties de texte ne sont pas dans une boîte visible comme par exemple "Les CSS sont" , "Télécharger" et "tu dois.". Ces parties de texte n'étant pas entourées par des balises en ligne (à la différence des parties entourées par em, strong ou a), elles sont néanmoins affichée dans des boîtes, définies dans les specifications CSS comme des boîtes en ligne anonymes ("anonymous inline boxes").

Il existe également d'autres boîtes invisibles pour contenir une ligne entière de texte : ce sont des boîtes de ligne.

Par exemple avec le code HTML suivant :

<p>Les CSS sont <strong>l'arme <em>secrète</em> de la Force</strong>
et vous devez <a href="#">télécharger</a> ce tutoriel.</p>

Les boîtes générées seront les suivantes si le texte du paragraphe est sur 2 lignes :

Nous ne pouvons pas agir sur les boîtes de ligne et sur les boîtes anonymes. C'est le navigateur et lui seul qui les prend en charge pour réaliser l'affichage.

La différence entre les boîtes bloc et les boîtes en ligne est importante car elles ne se comportent pas de la même façon et n'offrent pas les mêmes possibilités de positionnement ou de dimensionnement.

Ls boîtes de type bloc peuvent contenir d'autres boîtes de type bloc et/ou en ligne. Elles peuvent avoir des dimensions définies (height, width), posséder des marges externes (margin) et internes (padding), des bords (border) et être positionnées pour définir la mise en page du document. Par défaut, la plupart des éléments bloc possèdent des marges internes et externes non nulles, parfois différentes selon les navigateurs.

Les boîtes de type en ligne ne peuvent contenir que d'autres boites de type en ligne. Seules les boîtes des éléments img, input, textarea et select peuvent avoir des dimensions définies. Les boîtes des autres éléments en ligne occupent la place minimum nécessaire à leur contenu. Les boîtes en ligne ont des marges internes et externes nulles par défaut. Bien que l'on puisse les positionner, on ne devrait pas utiliser cette possibilité puisque ces boîtes affichent généralement des éléments de catégorie textuelle qui devraient rester dans le flot normal du texte.