Le modèle de boîte dans les CSS est le fondement de la mise en page sur le Web — chaque élément est représenté comme une boîte rectangulaire, avec le contenu de la boîte, un remplissage, un encadrement et une marge s'emboîtant mutuellement comme des poupées gigognes. Lorsqu'un navigateur affiche une mise en page Web, il détermine les styles appliqués au contenu de chaque boîte, la taille des « poupées gigognes » qui l'entourent et l'emplacement des boîtes les unes par rapport aux autres. Avant de comprendre comment créer des mises en page CSS, vous devez comprendre le modèle de boîte — c'est ce que nous allons examiner dans cet article.

Prérequis : Notions de base sur les ordinateurs, installation des logiciels de base, connaissances élémentaires sur la  gestion des fichiers et des notions de HTML (étude de Introduction au HTML) et une idée sur le fonctionnement des CSS.(voir les articles précédents de ce module.)
Objectif : Apprendre comment le modèle de boîte des CSS fonctionne et comment les éléments sont individuellement disposés sur une page.

Propriétés des boîtes

Chaque élément d'un document est représenté par une boîte rectangulaire dans l'agencement du document, la taille et les « poupées gigognes » de la boîte peuvent être ajustées grâce à des propriétés CSS spécifiques. Ces propriétés peuvent être représentées ainsi :

Boîtes imbriquées

width et height

Les propriétés width et height définissent la largeur et la hauteur de la boîte du contenu. C'est la surface dans laquelle le contenu de la boîte est affiché — ce contenu comprend à la fois le texte mis dans la boîte et les autres boîtes représentant les éléments enfants imbriqués.

Note : Il existe d'autres propriétés permettant des façons plus subtiles de gérer la taille des boîtes de contenu — en fonction de contraintes de taille plutôt que de taille absolue. Cela s'effectue avec  les propriétés min-width, max-width, min-height et max-height.

padding
Le remplissage est la marge intérieure d'une boîte CSS — entre la limite extérieure du rectangle de la boîte de contenu et la bordure interieure de l'encadrement. La taille de cette couche peut être définie des 4 côtés à la fois avec le raccourci de propriété padding ou bien côté par côté avec les propriétés padding-top, padding-right, padding-bottom et padding-left.
border
L'encadrement d'une boîte CSS se situe entre la limite extérieure du remplissage et la limite intérieur de la marge. Par défaut, la taille de la bordure est nulle — ce qui la rend invisible —, mais vous pouvez définir son épaisseur, son style et sa couleur pour la faire apparaître. La propriété globale border vous permet d'en définir les quatre côtés simultanément, par exemple border: 1px solid black. Elle peut s'éclater en différentes propriétés spécialisées pour des besoins de composition plus avancés :
margin

La marge entoure la boîte CSS et se colle contre les autres boîtes CSS dans la disposition d'ensemble. Elle se comporte pratiquement comme  padding ; la propriété globale est margin et les propriétés propres à chaque côté sont margin-top, margin-right, margin-bottom et margin-left.

Note : Les marges ont un comportement spécifique nommé margin collapsing (fusion des marges) : quand deux boîtes se touchent, la distance entre elles a la valeur de la plus grande des deux marges au contact et non leur somme.

Apprentissage actif : jouer avec les boîtes

A ce point, venons-en à une section d'apprentissage actif et effectuons quelques exercices pour illustrer certaines particularités du modèle de boîte exposées plus haut. Vous pouvez effectuer ces exercices dans l'éditeur en direct ci-dessous, mais la création locale de fichiers HTML et CSS séparés, à  tester dans une fenêtre dédiée, pourrait faciliter la vue des effets . Vous pouvez trouver le code exemple sur Github.

Si vous faites une erreur, vous pouvez tout Réinitialiser à l'aide du bouton correspondant. Si vous êtes vraiment bloqué, pressez Voir la solution pour afficher une réponse possible.

Dans l'exemple modifiable ci-dessous, nous avons un jeu de trois boîtes, contenant toutes du texte, composées pour couvrir toute la largeur du corps de la page (body). Dans le balisage, elles ont été placées dans les éléments <header>, <main> et <footer>. Voyez les trois règles CSS du bas — celles ciblant chaque boîte isolément — et essayez ce qui suit :

  • Voyez le modèle de boîte de chaque élément pris individuellement dans la page en ouvrant les outils de développement du navigateur et en cliquant sur les éléments dans l'inspecteur DOM. Consultez  Découvrir les outils de développement de navigateur pour obtenir de l'aide sur la façon de procéder. Chaque navigateur a une visionneuse de modèle de boîte montrant exactement la marge, l'encadrement et le remplissage appliqué à chaque boîte, la taille de la boîte de contenu et l'espace total occupé par l'élément.
  • Définissez margin-bottom de l'élément <main> à, disons, 20px, puis, margin-top de l'élément <footer> à, disons, 15px. Notez que la deuxième action n'induit aucune différence dans la disposition — la fusion des marges (margin collapsing) est en action ; la largeur affichée de la marge la plus petite est réduite à 0 ; il ne reste que la plus grande.
  • Définissez une valeur margin de 30px et une de padding de 30px sur chaque côté de l'élément <main> — notez comment l'espave autour de l'élément (marge) et celui entre l'encadrement et le contenu (remplissage) ont tous deux crû, amenant le contenu réel à prendre un espace plus réduit. À nouveau, vérifiez cela avec les outils de développement du navigateur.
  • Définissez un encadrement plus grand sur tous les côtés de l'élément <main>, disons  40px et notez que l'espace est pris sur le contenu au lieu d'être pris sur la marge ou le remplissage. Vous pouvez faire cela en définissant un nouveau jeu de valeurs pour la largeur, le style et la couleur à l'aide de la propriété border, par ex. 60px dashed red, mais comme les propriétés ont déjhà été définies dans une précédente règle, vous ne pouvez définir qu'une nouvelle valeur pour border-width.
  • Par défaut, la largeur width du contenu est fixé à 100% de l'espace disponible (après que la marge, l'encadrement et le remplissage ont pris leur part) — si vous changez la largeur de la fenêtre du navigateur, les boîtes grandissent ou rétrécissent pour rester contenues dans la fenêtre de sortie de l'exemple. La hauteur height du contenu sera par défaut à la hauteur du contenu à l'intérieur.
  • Définissez de nouvelles largeur et hauteur sur l'élément <main>} — commencez, disons, par 400px de large et 200px de haut — et observez l'effet. Vous remarquerez que la largeur ne change plus au fur et à mesure que la fenêtre du navigateur est redimensionnée.
  • Définissez un pourcentage de largeur sur l'élément <main>} à la place — disons 60% de la largeur — et observez l'effet. Vous devriez voir que la largeur change à nouveau au fur et à mesure que la fenêtre du navigateur est redimensionnée. Supprimez le paramètre height de l'élément <main>  pour l'instant.
  • Fixez le remplissage et la marge de l'élément <main> à 5% sur tous les côtés et observez le résultat. Si vous utilisez les outils de développement du navigateur pour regarder la largeur de la fenêtre de sortie de l'exemple et la comparer à la largeur de la marge ou du remplissage, vous verrez que ce 5% signifie « 5% de la largeur de l'élément contenant ». Ainsi, à mesure que la taille de la fenêtre de sortie de l'exemple augmente, il en va de même pour le remplissage et les marges.
  • Les marges acceptent des valeurs négatives ; elles permettent de faire chevaucher les boîtes d'éléments. Définissez margin-top : -50px ; sur l'élément <main> pour voir l'effet.
  • Continuez les expérimentations !

Quelques conseils et idées :

  • Par défaut, background-color ou background-image sont étendus jusqu'à la limite de la boîte. Ce comportement est modifiable avec la propriété background-clip, pour laquelle vous trouverez plus d'explications dans le paragraphe Découpage_du_fond.
  • Si la boîte de contenu devient plus grande que la fenêtre de sortie, elle déborde de la fenêtre et des barres de défilement apparaissent pour permettre de voir le reste du contenu de la boîte. Vous pouvez contrôler le débordement avec la propriété overflow — voir aussi le paragraphe Débordement ci-dessous.
  • Les hauteurs de boîte ne prennent pas en compte des tailles en pourcentage ; la hauteur de la boîte est toujours la hauteur du contenu de la boîte, à moins qu'une hauteur absolue donnée soit définie (par ex., en pixels ou ems). C'est plus pratique qu'une hauteur par défaut égale à 100% de celle de la vue de la page.
  • Les bordures ignorent également les paramètres de largeur en pourcentage.
  • Vous avez certainement remarqué que la largeur totale d'une boîte est la somme de ses propriétés width, padding-right, padding-left, border-right et border-left. Dans certains cas, c'est ennuyeux (par exemple, que se passe-t-il si vous voulez avoir une boîte de 50% de largeur totale avec encadrement et remplissage exprimés en pixels ? Pour éviter de tels problèmes, il est possible d'ajuster le modèle de boîte avec la propriété box-sizing. Avec la valeur border-box, le modèle de boîte devient ce nouveau modèle :

Modèle de boîte avec box-sizing

Manipulation avancée des boîtes

Outre le réglage de largeur, hauteur, encadrement, remplissage et marge des boîtes, il existe d'autres propriétés disponibles pour modifier leur comportement. Ce paragraphe traite de ces autres propriétés.

Débordement

Si l'on définit la taille d'une boîte avec des valeurs absolues (par ex., une largeur ou hauteur fixe en pixels), le contenu peut ne pas aller dans la taille autorisée ; le contenu déborde alors de la boîte. Pour contrôler ce qui se passe dans ce cas, nous pouvons utiliser la propriété overflow. Elle peut prendre plusieurs valeurs possibles, mais, le plus couramment, s'il y a trop de contenu, le contenu débordant, sera avec la valeur :

  • auto : caché et des barres de défilement seront affichées pour permettre à l'utilisateur de faire défiler pour voir tout le contenu.
  • hidden : caché.
  • visible : affiché en dehors de la boîte (comportement par défaut).

Voici un simple exemple pour montrer le fonctionnement de ceci :

Primo, du HTML:

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

et maintenant la CSS appliquée au HTML :

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

Ce code donne :

Découpage du fond

Les arrières-plans des boîtes sont constitués de couleurs ou d'images, empilées les unes sur les autres (background-color, background-image). Elles sont appliquées à la boîte et dessinées au dessous de cette dernière. Par défaut, les arrières-plans s'étendent jusqu'à la limite extérieure de l'encadrement. C'est souvent bon, mais peut se révéler ennuyeux dans certains cas ( que faire avec une image de fond en carreaux que vous souhaitez limiter à la surface du contenu ?). Ce comportement est ajustable en définissant la propriété background-clip de la boîte.

Voyons un exemple de fonctionnement. Primo, le HTML :

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

Maintenant la CSS :

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

Voici le résultat produit par ce code :

Contour

Enfin, le contour d'une boîte est quelque chose qui ressemble à un encadrement, mais qui ne fait pas partie du modèle de boîte. Il se comporte comme l'encadrement, mais il est tracé sur la boîte sans en changer la taille (pour être précis, le contour est dessiné à l'extérieur de la boîte d'encadrement, à l'intérieur de la marge).

Note : Méfiez-vous en utilisant la propriété outline. Elle s'utilise dans certains cas pour des raisons d'accessibilité pour mettre en évidence les parties actives d'une page Web, comme les liens lorsqu'un utilisateur clique dessus. En utilisant des contours, assurez-vous qu'ils ne ressemblent pas à des mises en évidence de liens, car les utilisateurs pourraient confondre.

Types de boîtes dans les CSS

Tout ce que nous avons dit jusqu'à présent s'applique aux boîtes représentant des éléments de niveau bloc. Cependant, les CSS disposent d'autres types de boîtes se comportant différemment. Le type de boîte appliqué à un élément est défini par la propriété display. Il y a nombre de valeurs disponibles pour display, mais dans cet article nous nous limiterons aux trois les plus courantes ; block, inline et inline-block.

  • Une boîte de type block est une boîte empilée sur d'autres boîtes (c.-à-d. le contenu avant et après la boîte apparaît sur une ligne séparée), et peut avoir la largeur et la hauteur définies sur elle. Le modèle de boîte entière, tel que décrit ci-dessus, s'applique aux boîtes block.
  • Une boîte de type inline est le contraire d'une boîte block : elle s'intègre dans le cours du texte du document (c'est-à-dire qu'elle apparaîtra sur la même ligne que le texte environnant et d'autres éléments en ligne, et son contenu sera coupé dans le cours du texte, comme des lignes de texte dans un paragraphe). Les réglages de largeur et de hauteur n'ont aucun effet sur les boîtes inline ; tout remplissage, marge et encadrement de boîtes en ligne modifie la position du texte environnant, mais n'affecte pas la position des boîtes block environnantes.
  • Une boîte de type inline-block est intermédiaire entre les deux précédentes : elle s'intègre dans le texte environnant et les autres éléments en ligne sans créer de sauts de ligne avant et après lui contrairement à une boîte de bloc, mais elle peut être dimensionnée avec width et height. Elle garde sa forme rectangulaire de bloc comme une boîte de type block. Elle ne sera pas cassée dans les lignes paragraphe comme la boîte inline. Dans l'exemple ci-dessous, le contenu de la boîte inline-block passe sur une 2ème ligne de texte car il n'y a pas assez d'espace sur la première ligne, mais elle garde une forme de boîte rectangulaire, alors que la boîte en ligne se brise en plusieurs lignes s'il n'y a pas assez d'espace — elle perd sa forme rectangulaire.

Note : Par défaut, les éléments du niveau bloc sont du type display: block; et les élément en ligne du type display: inline;.

Cela ne vous paraît pas clair ? Voyons un exemple.

D'abord, le HTML :

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

Ajoutons des règles CSS :

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  border  : 1px solid green;
  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

Voici le résultat du code ci-dessus ; il illustre les divers types d'affichage :

Dans l'article suivant

À ce stade, vous devriez avoir une certaine familiarité avec les boîtes dans les CSS et la façon dont elles fonctionnent. Ne vous inquiétez pas si vous ne comprenez pas la totalité de l'article maintenant — relisez-le pour mieux saisir et les choses seront plus claires lorsque vous commencerez à travailler sur des exemples pratiques plus loin dans le cours. Maintenant, nous allons examiner le Débogage des CSS.

Voir également

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : fredrun14, Dralyab, SphinxKnight, ricardeau
Dernière mise à jour par : fredrun14,