Les marges et espacements en CSS

Le modèle de boîte : chaque élément est une boîte

Avant de parler de margin et padding, il faut comprendre que chaque élément HTML (titre, paragraphe, image, div) est en réalité une boîte composée de quatre couches, de l’intérieur vers l’extérieur :

1. Le contenu : le texte, l’image, ce que l’élément affiche
2. Le padding (marge interne) : l’espace entre le contenu et la bordure
3. La bordure (border) : le cadre autour de l’élément
4. Le margin (marge externe) : l’espace entre la bordure et les éléments voisins

La différence entre margin et padding

Ces deux propriétés gèrent des espacements, mais à des endroits différents de la boîte. Les valeurs de marges peuvent s’exprimer en différentes unités : px (fixe), rem ou em (relative à la taille de police), % (relative au conteneur parent). On distingue :

• padding (marge interne) — crée de l’espace à l’intérieur de l’élément, entre le contenu et la bordure. Le padding est coloré par le background-color de l’élément.
• margin (marge externe) — crée de l’espace à l’extérieur de l’élément, entre sa bordure et les éléments voisins. Le margin est toujours transparent.

// Différence  etre padding & margin
.carte {
  background-color: #f0f0f0;
  border: 2px solid #333;

  padding: 1.5rem;// espace INTÉRIEUR : le texte ne colle pas à la bordure
  margin: 2rem;// espace EXTÉRIEUR : la carte ne colle pas aux éléments voisins
}

Déclarer ses marges en CSS

La notation raccourcie : 1, 2, 3 ou 4 valeurs

Les propriétés margin et padding acceptent de 1 à 4 valeurs. Selon le nombre de valeurs, elles s’appliquent différemment :

// 4 valeurs : haut, droite, bas, gauche (sens des aiguilles d'une montre)
.exemple-4 {
  margin: 1rem 2rem 3rem 4rem;
  // haut: 1rem | droite: 2rem | bas: 3rem | gauche: 4rem
}

// 3 valeurs : haut, droite-gauche, bas
.exemple-3 {
  padding: 1rem 2rem 3rem;
  // haut: 1rem | droite ET gauche: 2rem | bas: 3rem
}

// 2 valeurs : haut-bas, droite-gauche
.exemple-2 {
  margin: 2rem 4rem;
  // haut ET bas: 2rem | droite ET gauche: 4rem
}

// 1 valeur : identique sur les 4 côtés
.exemple-1 {
  padding: 1.5rem;
  // les 4 côtés: 1.5rem
}

Cibler un seul côté

Quand vous ne voulez modifier qu’un seul côté, utilisez les propriétés spécifiques. Les propriétés individuelles sont : margin-top, margin-right, margin-bottom, margin-left (et leurs équivalents padding-top, padding-right, padding-bottom, padding-left).

// Margin sur un seul côté
h1 {
  margin-bottom: 2rem;// espace sous le titre uniquement
}

// Padding sur un seul côté
li {
  padding-left: 1.5rem;// retrait intérieur à gauche
}

// On peut combiner les deux
blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-left: 1.5rem;
  border-left: 4px solid navy;
}

Centrer un élément avec margin auto

L’une des utilisations les plus fréquentes de margin est le centrage horizontal d’un bloc dans la page. La valeur auto demande au navigateur de répartir l’espace disponible équitablement à gauche et à droite. Pour que margin: 0 auto fonctionne, l’élément doit avoir une largeur définie (width ou max-width).

// Centrer un conteneur dans la page
.container {
  max-width: 800px;// le conteneur a une largeur maximale
  margin: 0 auto;// haut-bas: 0 | droite-gauche: auto (= centré)
}

La propriété box-sizing

Par défaut, quand vous définissez width: 300px sur un élément, ces 300px correspondent uniquement au contenu. Le padding et la bordure viennent s’ajouter par-dessus, ce qui peut contrarier les calculs et les alignements.

// Comportement par défaut
.carte {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
// Largeur réelle affichée : 300 + 20 + 20 + 2 + 2 = 344px

La propriété box-sizing: border-box change ce comportement : le padding et la bordure sont inclus dans la largeur définie. Le contenu se compresse pour laisser la place.

// Avec border-box : la largeur totale reste 300px
.carte {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
// Largeur réelle affichée : 300px (tout compris)

La bonne pratique : appliquer border-box à toute la page

La grande majorité des développeurs appliquent border-box à l’ensemble des éléments de la page dès le début de leur feuille de style *. Associé à ::before et ::after, il garantit que même les pseudo-éléments héritent de border-box. Cette pratique est devenu un standard.

// Reset recommandé, à placer en tout début de votre CSS
*,
*::before,
*::after {
  box-sizing: border-box;
}

// Variante minimaliste
* {
  box-sizing: border-box;
}

Bonnes pratiques

• Commencez toujours votre CSS par box-sizing: border-box sur le sélecteur universel ; cela vous évitera des calculs de dimensions surprenants tout au long de votre projet
• Utilisez des rem pour les espacements plutôt que des px : vos marges resteront proportionnelles si l’utilisateur change la taille de police de son navigateur
• Préférez padding pour l’espace intérieur, margin pour l’espace extérieur . Ne les confondez pas, même si visuellement le résultat est parfois identique
• Utilisez l’inspecteur (F12) pour visualiser le modèle de boîte : le panneau coloré est votre meilleur outil de diagnostic
• Soyez cohérent dans vos espacements : définissez quelques valeurs de référence (par exemple 0.5rem, 1rem, 1.5rem, 2rem) et tenez-vous-y dans tout le projet
• Évitez les marges négatives : elles peuvent créer des chevauchements imprévus et rendre votre mise en page difficile à maintenir