Langages de programmation orientés Web
CSS Box model
2025 - 2026
Modèle de boîte
C'est quoi ?
Tout élément HTML est inclus dans une boite, composé de plusieurs couches. En partant de l'intérieur vers l'extérieur on retrouve :
- Content : le contenu de notre élément (texte, autre élément HTML).
- Padding : l'espace interne encadrant le contenu.
- Border : une bordure qui englobe le contenu et le padding
- Margin : l'espace externe, qui crée une zone de vide autour de notre boîte.
Content
Le content c'est donc le contenu d'un élément (textes, éléments, un mélange des deux) qui peut être redimensionner via 2 propriétés :
- width
- height
width
La propriété width définit la largeur d'un élément. La valeur attendu est un nombre ou un mot clé.
height
La propriété height définit la hauteur d'un élément. La valeur attendu est un nombre ou un mot clé.
Padding
Le padding est un espacement interne englobant le contenu qui peut être définit de manière égale ou précise pour chaque direction :
// Espace interne de 20px dans toute les directions
padding: 20px;
// Espace interne vers le haut
padding-top: 20px;
// Espace interne vers la droite
padding-right: 20px;
// Espace interne vers le bas
padding-bottom: 20px;
// Espace interne vers la gauche
padding-left: 20px;
Border
Le border définit une bordure autour du contenu et du padding avec 3 propriétés : épaisseur, style et couleur. Comme le padding on peut préciser sa direction.
// Ajoute un bord rouge avec une épaisseur de 10px autour de l'élément
border: 10px solid red;
// Bordure vers le haut
border-top: 10px solid red;
// Bordure vers la droite
border-right: 10px solid red;
// Bordure vers le bas
border-bottom: 10px solid red;
// Bordure vers la gauche
border-left: 10px solid red;
Margin
Le margin est un espacement externe qui peut être définit de manière égale ou précise pour chaque direction :
Contrairement au padding, le margin sera toujours un espace neutre qui n'influe pas sur l'aspect de l'élément.
// Espace externe de 20px dans toute les directions
margin: 20px;
// Espace externe vers le haut
margin-top: 20px;
// Espace externe vers la droite
margin-right: 20px;
// Espace externe vers le bas
margin-bottom: 20px;
// Espace externe vers la gauche
margin-left: 20px;
Display
La propriété display définit l'affichage de l'élément et comment est géré le modèle de boîte. Il existe plusieurs valeurs possible, voyons les 4 valeurs communes :
- none : l'élément n'est pas affiché et ne sera plus compris dans le flux de la page.
- block : l'élément prend la largeur disponible. Il commence sur une nouvelle ligne.
- inline : l'élément ne peut être redimensionné, et s'inscrit dans la continuité du texte. Le margin vertical n'est pas pris en compte.
- inline-block : l'élément à la taille de son contenu, mais peut se redimensionner. Pas de retour à la ligne.
Centrer horizontalement
Pour centrer horizontalement un élément il existe plusieurs techinques possibles. Pour le moment nous allons utiliser ce que nous venons d'apprendre pour y arriver.
Pour se faire nous allons combiner 3 propriétés: display, width et margin.
HTML
Préparons notre HTML, il nous faut une div (ou un autre élément de structure) et au moins un paragraphe à l'intérieur pour y ajouter du contenu.
CSS
Maintenant que nous avons notre structure, nous allons préciser display: block; à notre balise structurante et lui donner une largeur de 500px.
Par défaut toute les balises de structures sont en display: block;, cela nous permet juste de nous assurer du contexte.Centrer
Pour centrer un élément en display: block; on combine margin-left et margin-right avec la valeur auto. Cela permet d'utiliser l'espace restant comme espacement dans la direction choisie. Dans notre cas on combine deux directions, le résultat est un espace identique à gauche et droite.
Ceci n'aura pas d'effet sur un élément en display: inline; ou si l'élément occupe toute la largeur.Piste d'amélioration
Pour le moment notre taille est fixe, ce qui peut poser problème sur des écrans à largeur réduite. Je vous laisse 15 minutes pour mettre en place une solution.
Indice: pensez aux différents types d'unité.Propriétés
Suite
border-radius
border-radius definit l'arrondissement des coins de notre forme. La valeur peut être absolue ou relative, chaque coin peut être précisé.
Dégradé linéaire
Il est possible de créer des dégradés pour notre couleur de fond. Il existe une fonction spéciale nommée linear-gradient() qui permet de définir un dégradé d'une couleur vers une autre de manière linéaire :
Une fonction est toujours suivi de parenthèses ouvrante et fermante, et attend un ou plusieurs paramètres.box-sizing
Si nous avons un élément avec une taille de 200px, et que nous ajoutons padding: 40px;, cela va étendre la taille de notre boîte au delà des dimensions désirées. Nous aurons donc en largeur 200px + 40px de padding à gauche + 40px de padding à droite pour un total de 280px. Les bordures auront aussi cet effet.
Heureusement box-sizing permet de changer ce comportement et de demander à respecter la taille indiquée par width ou height. Voici les 2 valeurs possibles :
- content-box : valeur par défaut, le padding et les bordures sont ajoutées à la largeur.
- box-sizing : permet de prendre en compte le padding et les bordures dans le calcul des dimensions pour respecter les valeurs de largeur et hauteur.
Exercices
Bouton
Sur base de l'image suivant, essayer de reproduire cet élément bouton.
- on part de l'élément a
- couleur de fond #FFC352
- couleur de texte #4e4741
Getting serious
Reproduire le design suivant en utilisant les notions vues aux cours :
- Supreme pour les titres
- Satoshi pour les textes
- couleur d'accentuation : tomato
- Url image: https://www.gamespot.com/a/uploads/original/1601/16018044/4601054-sc_front_b.jpg
