Module 1Les bases du CSS
Chapitre 6 sur 15
Le modèle de boîte
Contenu, padding, bordure, marge, box-sizing, fonds, dégradés et ombres.
- ≈ 180 min
- 8 leçons
- 2 vidéos
- 3 exercices
Module 1Les bases du CSS
Chapitre 6 sur 15
Contenu, padding, bordure, marge, box-sizing, fonds, dégradés et ombres.
Objectifs
Avec ce chapitre, tu sauras…
width, height, min-width et max-width ;margin et padding (1 à 4 valeurs) ;box-sizing: border-box et calculer la taille réelle d'une boîte ;overflow.Leçon 1
<div style="font-family:Inter,sans-serif;font-size:7.5pt;text-align:center;background:#fbe3c4;padding:6px;border:1px dashed #c98a3a">margin
<div style="background:#2b2f3a;color:#fff;padding:6px;margin-top:4px">border
<div style="background:#c9e7c3;color:#1f3d1b;padding:8px;margin-top:4px">padding
<div style="background:#9fc0f0;color:#0d2a5c;padding:10px;margin-top:4px;font-weight:700">contenu (width × height)</div>
</div></div></div>.carte {
width: 300px; /* largeur du contenu */
padding: 20px; /* espace intérieur */
border: 2px solid #2f5bc4; /* bordure */
margin: 16px; /* espace extérieur */
background-color: #eef4fb; /* le fond couvre contenu + padding (+ dessous la bordure) */
}Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Leçon 2
| Propriété | Rôle | Conseil |
|---|---|---|
width / height | dimensions du contenu | évite height fixe sur un bloc de texte : le texte déborde |
min-width / min-height | taille minimale | min-height: 100vh pour une section plein écran |
max-width / max-height | taille maximale | max-width: 1100px pour le conteneur du site |
aspect-ratio |
Leçon 3
| Écriture | Haut | Droite | Bas | Gauche |
|---|---|---|---|---|
margin: 10px; | 10 | 10 | 10 | 10 |
margin: 10px 20px; | 10 | 20 | 10 | 20 |
Leçon 4
| Valeur | Aspect |
|---|---|
solid | trait plein |
dashed | tirets |
dotted | pointillés |
double | double trait |
none | pas de bordure |
Leçon 5
box-sizing: content-box (défaut) | box-sizing: border-box | |
|---|---|---|
width désigne… | le contenu | contenu + padding + bordure |
.carte : width: 300px; padding: 20px; border: 2px | 300 + 2×20 + 2×2 = 344 px | 300 px (le contenu fait 256 px) |
| facile à prévoir ? | non | oui |
Leçon 6
Leçon 7
| Propriété | Rôle | Exemple |
|---|---|---|
background-color | couleur de fond | #eef4fb |
background-image | image ou dégradé | url("images/medina.jpg") |
background-size | taille de l'image | cover (couvre tout), contain (entière) |
background-position | position |
Leçon 8
| Valeur | Effet |
|---|---|
visible | (défaut) le contenu dépasse de la boîte |
hidden | le surplus est coupé |
scroll | barres de défilement toujours affichées |
auto | barres de défilement seulement si nécessaire (le plus utile) |
Vidéo · À regarder
EN1Quelle zone se trouve entre le contenu et la bordure ?
2margin: 10px 20px; donne à gauche…
3En content-box, une boîte width: 200px; padding: 10px; border: 1px mesure…
4Pour centrer horizontalement un bloc de largeur fixe :
5Un h2 avec margin-bottom: 40px suivi d'un p avec margin-top: 25px sont séparés de…
6Pour une image de fond qui couvre toute la boîte :
L'essentiel du chapitre
*, *::before, *::after { box-sizing: border-box; } : width inclut padding et bordure.max-width + margin: 0 auto. Les marges verticales fusionnent.border-radius: 50% pour un cercle ; background-size: cover ; dégradés linear-gradient() ; box-shadow.height fixe sur du texte ; overflow: auto si le contenu peut déborder ; img { max-width: 100%; height: auto; }.| rapport largeur/hauteur |
aspect-ratio: 16 / 9 pour une vidéo |
margin: 10px 20px 30px;| 10 |
| 20 |
| 30 |
| 20 |
margin: 10px 20px 30px 40px; | 10 | 20 | 30 | 40 |
outline n'est pas border
Le réglage universel
center, top right |
background-repeat | répétition | no-repeat, repeat-x |
background | raccourci | background: #17306e url("motif.svg") center / cover no-repeat; |
| Valeur | Sens |
|---|---|
0 4px 12px rgb(0 0 0 / 15%) | décalage horizontal 0, vertical 4 px, flou 12 px, noir à 15 % : ombre douce |
0 0 0 3px #f5b400 | sans flou ni décalage, étalement de 3 px : un faux contour |
inset 0 2px 4px rgb(0 0 0 / 20%) | ombre intérieure |
CSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
En CSS, tout est une boîte : chaque titre, chaque paragraphe, chaque lien, chaque image est un rectangle. Comprendre comment la taille de ce rectangle se calcule est la clé de toute la mise en page. C'est le chapitre le plus important de la Partie I.
Le chapitre « Box Model » de Dave Gray (anglais) : vingt-cinq minutes sur le modèle de boîte. C'est la vidéo de référence de ce chapitre : garde l'onglet Computed des DevTools ouvert pendant toute la vidéo.
Tableau: Les propriétés de dimension
Tableau: De une à quatre valeurs
.encadre {
border: 1px solid #cdd8f0; /* épaisseur, style, couleur */
border-left: 4px solid #2f5bc4; /* un seul côté */
border-radius: 8px; /* coins arrondis */
}
.avatar {
border-radius: 50%; /* image carrée → cercle */
}
.pilule {
border-radius: 999px; /* bouton en forme de pilule */
}Tableau: Les styles de bordure
<div style="font-family:Inter,sans-serif;font-size:8pt">
<span style="display:inline-block;border:2px solid #2f5bc4;padding:6px 10px;margin-right:6px">solid</span>
<span style="display:inline-block;border:2px dashed #2f5bc4;padding:6px 10px;margin-right:6px">dashed</span>
<span style="display:inline-block;border:2px dotted #2f5bc4;padding:6px 10px;margin-right:6px">dotted</span>
<span style="display:inline-block;border:4px double #2f5bc4;padding:6px 10px;margin-right:6px">double</span>
<span style="display:inline-block;border:1px solid #cdd8f0;border-left:4px solid #2f5bc4;border-radius:6px;padding:6px 10px;margin-right:6px">côté gauche + arrondi</span>
<span style="display:inline-block;background:#2f5bc4;color:#fff;border-radius:999px;padding:6px 14px">pilule</span>
</div>Par défaut, width désigne la largeur du contenu seulement : le padding et la bordure s'ajoutent.
Tableau: Le calcul de la largeur visible
.conteneur {
max-width: 1100px;
margin: 0 auto; /* 0 en haut et en bas, auto à gauche et à droite */
padding: 0 1rem; /* un peu d'air sur les petits écrans */
}Avec une largeur définie (width ou max-width), margin-left: auto et margin-right: auto partagent l'espace libre à parts égales : le bloc est centré horizontalement. Cela ne fonctionne pas verticalement dans le flux normal (Flexbox et Grid le feront, chapitres 9 et 10). Pour centrer un texte, c'est text-align: center.
Quand deux marges verticales se touchent, elles fusionnent : elles ne s'additionnent pas, c'est la plus grande qui l'emporte. Un h2 avec margin-bottom: 30px suivi d'un p avec margin-top: 20px sont séparés de 30 px, pas de 50 px. Ce phénomène (margin collapsing) ne concerne que les marges verticales, et jamais les éléments en Flexbox ou Grid. Bonne pratique : ne mettre des marges que dans une seule direction (par exemple seulement margin-bottom).
Tableau: Les propriétés de fond
pre {
max-width: 100%;
overflow-x: auto;
}Pour l'en-tête de ton CV, crée une bannière d'au moins 50vh de haut, avec une photo de fond qui couvre toute la zone, un dégradé sombre semi-transparent par-dessus, le texte en blanc, et un padding confortable.
Une boîte a width: 400px; padding: 15px 30px; border: 3px solid; margin: 20px auto;. Calcule la largeur visible (bordure comprise) en content-box, puis en border-box. Dans le second cas, quelle est la largeur de la zone de contenu ?
Crée une carte de profil : largeur maximale de 320px, centrée, fond blanc, padding de 1.5rem, bordure fine gris clair, coins arrondis de 12px, ombre douce. À l'intérieur : la photo en cercle de 120px, le nom, le métier en gris, et un bouton « Contacter » en forme de pilule avec un dégradé.
On peut aussi viser un seul côté : margin-top, padding-left, etc. Et les propriétés logiques modernes margin-inline (gauche + droite) et margin-block (haut + bas) : padding-inline: 1rem.
outline dessine un contour en dehors de la boîte sans prendre de place : il ne décale rien. C'est pour cela qu'on l'utilise pour le focus (chapitre 2). border, lui, fait partie de la taille de la boîte.
Presque tous les projets commencent par cette règle, qui rend les tailles prévisibles :
*, *::before, *::after { box-sizing: border-box; }
.banniere {
min-height: 60vh;
color: white;
background-image:
linear-gradient(rgb(23 48 110 / 80%), rgb(23 48 110 / 40%)),
url("images/medina.jpg");
background-size: cover;
background-position: center;
}
.bouton {
background: linear-gradient(135deg, #2f5bc4, #17306e);
box-shadow: 0 4px 12px rgb(0 0 0 / 15%); /* décalage X, Y, flou, couleur */
}<div style="font-family:Inter,sans-serif;font-size:8pt;color:#fff;text-align:center">
<div style="display:inline-block;width:47%;height:50px;line-height:50px;background:linear-gradient(135deg,#2f5bc4,#17306e);border-radius:6px;margin-right:3%">linear-gradient(135deg, …)</div><div style="display:inline-block;width:47%;height:50px;line-height:50px;background:radial-gradient(circle,#2f5bc4,#17306e);border-radius:6px">radial-gradient(circle, …)</div>
</div>Tableau: L'ombre : box-shadow
Le chapitre « Mini Project » de Dave Gray (anglais) : un petit projet qui réutilise les notions des chapitres 1 à 6. Regarde-le, puis fais l'exercice 6.3.