CSS • Page 4 / Box model

Le Box Model : marges, bordures, padding…

En CSS, presque tout est une boîte. Comprendre le box model, c’est comprendre comment les éléments prennent de la place sur la page.

1. Le Box Model, c'est quoi ?

Pour chaque élément (un <div>, un <p>, un <button>…), le navigateur considère :

content : le contenu (texte, image…)
padding : espace entre le contenu et la bordure
border : la bordure
margin : espace autour de la boîte, par rapport aux autres éléments

.ma-boite {
  margin: 20px;         /* extérieur */
  border: 2px solid #4f8bff;
  padding: 15px;        /* intérieur */
}

Astuce : ouvre les outils de développement de ton navigateur (F12) puis onglet “Inspector” ou “Éléments” : tu verras le box model visuellement.

Quelle propriété contrôle l’espace entre la bordure et le contenu ?

2. margin & padding dans le détail

Notation simple

.box {
  margin: 20px;
  padding: 10px;
}

→ applique la même valeur sur les 4 côtés.

Notation avec 4 valeurs

.box {
  margin: 10px 20px 30px 40px;
}

Ordre : haut, droite, bas, gauche (top, right, bottom, left).

Propriétés séparées

.box {
  margin-top: 10px;
  margin-bottom: 30px;
  padding-left: 20px;
}

Tu peux combiner : par exemple margin: 0 auto; pour centrer une boîte.

Dans margin: 5px 10px 15px 20px;, combien vaut la marge du bas ?

3. Bordures, largeur & hauteur

Border

.box {
  border: 3px solid #ffbf47;
}

Format : épaisseur + style + couleur (solid, dashed, dotted…)

Rayon de bordure

.box {
  border-radius: 12px; /* coins arrondis */
}

width & height

.box {
  width: 300px;
  height: 150px;
}

Tu peux aussi utiliser % ou vw/vh (viewport width/height).

Par défaut, la largeur d’un élément en display: block occupe toute la largeur disponible.

Dans border: 2px solid red;, “solid” représente :

4. display : block, inline, inline-block

La propriété display contrôle comment une boîte se comporte dans la page.

block

Prend toute la largeur disponible.
Commence sur une nouvelle ligne.

Ex : <div>, <p>, <h1>

inline

Ne casse pas la ligne.
Ne prend que la place de son contenu.

Ex : <span>, <a>

a {
  display: inline-block; /* mélange des deux : sur la ligne mais dimensionnable */
  padding: 6px 10px;
  border-radius: 999px;
}

Quel display permet d’avoir un élément sur la ligne, mais avec width/height/padding ?

5. Mini labo : joue avec la boîte

Modifie les valeurs pour voir comment la boîte change.

margin (px) : padding (px) : border (px) :

Boîte de démo

6. Mini-projet : cartes d’info alignées

Crée une page cartes.html et un fichier cartes.css avec :

Un fond sombre pour le body.
Un conteneur centré avec une largeur max (ex : 900px).
3 “cartes” (div) avec :
- margin pour les espacer,
- padding pour respirer,
- border-radius pour les arrondir,
- une petite bordure légère.
Chaque carte contient un titre + un texte.

.cartes-wrapper {
  max-width: 900px;
  margin: 40px auto;
}

.carte {
  background-color: #090f23;
  border-radius: 14px;
  border: 1px solid #252b46;
  padding: 16px;
  margin-bottom: 16px;
}

Plus tard, tu pourras utiliser flexbox ou grid pour les mettre côte à côte.

← Retour à CSS page 3 Page suivante : Flexbox (mise en page moderne) →