Pour leur affichage, les éléments HTML générent des boîtes rectangulaires qui s'empilent verticalement ou s'alignent horizontalement.

### Des boîtes dans des boîtes dans ...

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).

le modéle de boîte (box-model)

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.

Exemple : boîtes bloc ou en ligne
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les feuilles de style</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière Des Etoiles</h3> <p>Les CSS sont <strong>l'arme <em>secrète</em> de la Force !</strong></p> <p><img src="../exemples/img/yoda1.png"> Télécharger <a href="#">ce tutoriel</a> tu dois.</p> </body> </html>
Fichier CSS : styles.css
* { border: 1px solid red; margin: 10px; padding: 10px; }

### Bloc ou en ligne ?

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.

block et inline

Les boîtes affichées les unes en dessous des autres sont appelées des boîtes de bloc (block). Elles sont générées ainsi par défaut pour les éléments HTML de structure et de groupement (ainsi que quelques éléments de table et de formulaire).

Les boîtes de type bloc sont disposées les unes sous les autres, alignées sur leur bord gauche (disposition verticale). Par défaut, une boîte de type bloc ne peut pas être à côté d'une autre boîte à droite ou à gauche. Elle est précédée et suivie d'une sorte de saut de ligne.

Les boîtes affichées les unes à côté des autres sont appelées des boîtes en ligne (inline). Elles sont générées ainsi par défaut pour les éléments HTML de texte, de formulaire et embarqués.

Les boîtes de type en ligne sont disposées les unes à côté des autres, alignées sur leur bord inférieur (disposition horizontale). Par défaut, une boîte en ligne n'est ni précédée, ni suivie d'un saut de ligne.

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.

Exemple : boîtes bloc ou en ligne
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les feuilles de style</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière Des Etoiles</h3> <p>Les CSS sont <strong>l'arme <em>secrète</em> de la Force !</strong></p> <p><img src="../exemples/img/yoda1.png"> Télécharger <a href="#">ce tutoriel</a> tu dois.</p> </body> </html>
Fichier CSS : styles.css
html, body, h3, p { border: 1px solid red; margin: 10px; padding: 10px; } em, strong, img, a { border: 1px solid green; padding: 3px; }

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 :

tous les types de boîtes

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.

### Différences

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.

Fonctionnalité | Boîtes de blocs (block) | Boîtes en ligne (inline)
Placement par défaut | Les unes en dessous des autres. Le comportement peut être changé avec la propriété display | Les unes à côté des autres. Le comportement peut être changé avec la propriété display
Occupation | Toute la largeur de leur conteneur. Hauteur nécessaire pour afficher le contenu. | L'espace minimum en largeur et en hauteur pour afficher le contenu.
Contiennent | Des boîtes de blocs, des boîtes en ligne | Des boîtes en ligne
Positionnement | Oui left, top, right, bottom, position, float | Possible en changeant le comportement normal de la boîte. A éviter.
Dimensionnement | Largeur et hauteur avec height, width. | Uniquement possible pour les zones de saisie des formulaires.
Marges intérieures | Haute et basse, droite et gauche avec padding | Haute et basse, droite et gauche avec padding. Marges haute et basse inutilisables en réalité car elle débordent sous les lignes suivantes ou précédentes.
Marges extérieures | Haute et basse, droite et gauche avec margin | Droite et gauche avec margin-right et margin-left