The box model · Le modèle de boîte
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
Français
Chaque boîte a des couches
- CSS traite chaque élément comme une boîte.
- Le contenu est votre texte ou image. La padding (espace interne) est l'espace à l'intérieur, autour du contenu.
- La border (bordure) est une ligne autour de la padding. La margin (marge) est l'espace à l'extérieur, repoussant les autres boîtes.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
Français
Padding et border
padding: 20px;ajoute 20 pixels d'espace à l'intérieur, sur les quatre côtés.border: 2px solid black;trace une ligne — sa largeur, son style, puis sa couleur.- Padding rend une boîte spacieuse ; une border la fait ressortir.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
Français
Erreurs courantes
- Le modèle de boîte est : contenu, puis padding, puis border, puis margin (de l'intérieur vers l'extérieur).
- Padding ajoute de l'espace à l'intérieur de la bordure.
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
Français
À vous maintenant
- Padding est à l'intérieur ; la border est placée autour.
- Ajoutez de la padding à une boîte, puis une border.
Explore · Explorer
The CSS box model · Le modèle de boîte CSS
Every box is content + padding + border + margin around it. · Chaque boîte correspond au contenu + marge interne + bordure + marge externe autour.
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · Donnez à la boîte de l'espace à l'intérieur. Ajoutez padding: 20px; à la règle .box.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · Tracez une ligne autour de la boîte. Ajoutez border: 2px solid navy; à la règle .box — gardez les trois parties dans cet ordre : largeur, style, couleur.