Temps de lecture approximative : 12 minutes
Chapitre 4 - Le modèle de boîte
Le modèle de boîte est essentiel en CSS. La bonne compréhension de ce modèle est indispensable pour mettre correctement en forme une page HTML. Pour rappel, c'est le moteur de rendu qui s'occupe de la compréhension et de l'affichage du CSS.
La règle est la suivante : dans une page HTML, chaque élément ou balise est représenté par une boîte rectangulaire. Cette boîte fait sens avec ce que nous avons vu dans le chapitre précédemment. Les bordures de couleur autour des éléments dessinaient tout simplement les extrémités de la boîte.
Le modèle de boîte peut être ajusté et modifié grâce à des propriétés particulières. Le schéma ci-après illustre le modèle de boîte avec les propriétés incontournables : margin:, border: et padding:.
On remarque que le modèle de boîte est évolutif et ajustable et fait penser à une poupée russe. La boîte centrale, celle du contenu de la balise, est matérialisée en bleu clair.
Marge intérieure (padding:)
Autour de la boîte centrale et donc du contenu, on distingue la marge intérieure. Elle est représentée en CSS grâce à la propriété padding:.
Bordure (border:)
La bordure est une zone intercalée entre les marges intérieure et extérieure. On peut matérialiser ou non cette limite. C'est à l'aide de cette propriété que dans le chapitre précédent nous avons mis en valeur les différents types de boîtes. Elle est représentée en CSS avec la propriété border:.
Marge extérieure (margin:)
La marge extérieure correspond à la limite extrême de la boîte et représente la distance entre deux boîtes. En CSS, on utilise la propriété : margin:.
Exemples
Pour bien comprendre l'utilisation de ces propriétés et les mettre en évidence, prenons le temps d'étudier plusieurs exemples.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la page affiché dans la barre du navigateur</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p> Numne, si <span>Coriolanus</span> habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num <strong>Maelium</strong> debuerunt iuvare?</p>
<p>Eo quoque accedente quod et <strong>Nomenclatores</strong> adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios <span>Ignobiles</span> et obscuros.</p>
</body>
</html>
p {
border: 3px red solid;
margin: 0;
padding: 0;
}Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?
Eo quoque accedente quod et Nomenclatores adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios Ignobiles et obscuros.
Dans cet exemple, on met en évidence le fait que deux boîtes qui n'ont pas de marge extérieure (margin: 0), auront les bordures qui se touchent. Conservons le même fichier HTML et modifions uniquement la feuille de style en ajoutant seulement des marges extérieures.
p {
border: 3px red solid;
margin: 15px;
padding: 0;
}Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?
Eo quoque accedente quod et Nomenclatores adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios Ignobiles et obscuros.
La différence est frappante, les 2 boîtes sont désormais espacées l'une de l'autre. Qu'en est-il de la valeur de padding: qui est toujours à zéro ? Utilisons toujours le même fichier HTML et modifions le fichier CSS pour la mettre en évidence.
p {
border: 3px red solid;
margin: 15px;
padding: 15px;
}Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?
Eo quoque accedente quod et Nomenclatores adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios Ignobiles et obscuros.
La différence est une nouvelle fois frappante. On distingue entre les deux exemples, la marge intérieure. Le contenu est désormais bien éloigné de la bordure.
Le CSS offre un contrôle total sur les marges internes et externes, et les bordures. Il existe des propriétés pour définir chaque côté (en haut, à droite, en bas et à gauche). Pour raccourcir le code et éviter une redondance, il est possible de spécifier toutes les propriétés dans une propriété. C'est ce que nous avons utilisé depuis le début du cours à savoir :
#test {
margin: 25px;
}Avec cette méthode, toutes les marges externes sont à 25px. Le fonctionnement est le même pour les autres propriétés. Cependant, la version longue de la ligne ci-dessus serait donc :
#test {
margin-top: 25px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}Il existe également deux autres raccourcis intéressants.
#test {
margin: 25px 10px;
}
#test {
margin: 25px 15px 10px;
}La première règle configurera une marge externe de 25px en haut et en bas et 10px à droite et à gauche. Tandis que la seconde règle personnalisera une marge externe en haut à 25px, à droite à 15px et en bas à 10px. Pour illustrer encore davantage ces propos, rien de tel qu'un schéma. Ces raccourcis fonctionnent avec margin:, padding: et border:.
margin: (image gentillement empruntée au Smashing Magazine)Largeur (width:) et hauteur (height:) d'une boîte
Nous étudions la valeur par défaut de la propriété box-sizing: à savoir content-box. Si la valeur de cette propriété est à border-box, le comportement de la taille de la boîte est différent. Débutant, ne tenez pas compte de cette remarque.
Au risque de se répéter : chaque élément d'une page HTML est une boîte rectangulaire. Nous venons de découvrir que nous pouvions jouer sur certaines propriétés d'une boîte pour gérer les marges et la bordure. Intéressons-nous désormais à la place qu'occupe une boîte. Comment la taille d'une boîte est-elle calculée exactement ?
| Taille | Calcul |
|---|---|
width: |
width + padding-left + padding-right + border-left + border-right |
height: |
height + padding-top + padding-bottom + border-top + border-bottom |
La marge extérieure est unique dans le sens où elle n'affecte pas la taille de la boîte.
Pour bien comprendre ce que nous venons de découvrir, observons l'exemple ci-après.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la page affiché dans la barre du navigateur</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p> Numne, si <span>Coriolanus</span> habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num <strong>Maelium</strong> debuerunt iuvare?</p>
<p id="super">Eo quoque accedente quod et <strong>Nomenclatores</strong> adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios <span>Ignobiles</span> et obscuros.</p>
</body>
</html>
p {
border: 3px red solid;
margin: 15px;
padding: 15px;
}
p#super {
width: 300px;
height: 200px;
background: lightseagreen;
}Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?
Eo quoque accedente quod et Nomenclatores adsueti haec, mercede accepta lucris quosdam et prandiis inserunt subditicios Ignobiles et obscuros.
Le premier paragraphe se comporte de la même manière que ce que nous avons déjà vu. Étant de type block, il occupe 100% de la largeur et prend la hauteur dont il a besoin. En ce qui concerne le second paragraphe, des valeurs pour les propriétés width: et height: ont été précisées. La taille de la boîte est modifiée. Question, quelles sont la largeur et la hauteur du second paragraphe ? Attention, il ne faut pas oublier les notions d'héritage.
| Taille | Calcul |
|---|---|
width: |
300 + 15 + 15 + 3 + 3 = 336px |
height: |
200 + 15 + 15 + 3 + 3 = 236px |
Ce chapitre incontournable permet de maîtriser le modèle de boîte en CSS. C'est une nouvelle fois une notion clé. Elle est très importante pour rédiger correctement les feuilles de styles afin de mettre en forme les pages HTML comme vous le souhaitez.