Spacing — margin and padding · Espacement — marge externe et marginne interne
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
Français
Espace entre les boîtes
- Margin est l'espace à l'extérieur d'une boîte — l'écart par rapport à ses voisins.
margin: 30px;ajoute 30 pixels sur les quatre côtés, à l'extérieur de la bordure.- Padding pousse le contenu vers l'intérieur ; margin pousse les autres boîtes vers l'extérieur.
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
Français
Un côté à la fois
- Vous pouvez espacer seulement un côté :
margin-top,margin-right,margin-bottom,margin-left. - Il en va de même pour la padding :
padding-left: 10px;, etc. margin-bottomsous un titre sépare nettement celui-ci du texte.
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
Français
Erreurs courantes
- Padding est à l'intérieur de la border ; margin est l'espace à l'extérieur.
box-sizing: border-boxinclut la padding et la border dans la largeur.
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
Français
À vous maintenant
- Margin est l'écart entre les boîtes ; padding est l'espace à l'intérieur d'une seule.
- Ajoutez une margin autour d'une boîte, puis de l'espace sous un titre.
Explore · Explorer
margin vs padding
Padding is space inside the border; margin · marge is space outside. · Padding est l'espace à l'intérieur de la bordure ; margin · marge est l'espace à l'extérieur.
Push the boxes apart from each other. Add margin: 30px; to the .box rule. · Éloignez les boîtes les unes des autres. Ajoutez margin: 30px; à la règle .box.
Add space below the heading only. Add h1 { margin-bottom: 24px; }. · Ajoutez de l'espace sous le titre uniquement. Ajoutez h1 { margin-bottom: 24px; }.