Marges et bordures

L'espace, c'est aussi du design

Sur une bonne page web, les éléments ne se collent pas les uns aux autres. Il y a de l'espace entre eux et à l'intérieur des blocs. C'est ce qui rend une page lisible et agréable.

En CSS, l'espace se contrôle avec deux propriétés : padding (espace intérieur) et margin (espace extérieur). La différence est importante à comprendre.

Le padding : l'espace à l'intérieur

Le padding, c'est l'espace entre le contenu et la bordure d'un élément.

Imagine un cadre photo. Le padding, c'est le passe-partout blanc entre la photo et le cadre. La photo = le contenu. Le passe-partout = le padding. Le cadre = la bordure.

.boite {
  /* Les 4 côtés identiques */
  padding: 20px;

  /* Haut et bas = 10px, Gauche et droite = 20px */
  padding: 10px 20px;

  /* Haut = 5px, Droite = 10px, Bas = 15px, Gauche = 20px */
  /* Sens des aiguilles d'une montre : haut, droite, bas, gauche */
  padding: 5px 10px 15px 20px;

  /* Ou côté par côté, plus explicite */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Mémo pour l'ordre des 4 valeurs : TRouBLe (Top, Right, Bottom, Left — haut, droite, bas, gauche). Sens des aiguilles d'une montre, en partant du haut.

Le margin : l'espace à l'extérieur

Le margin, c'est l'espace entre la bordure de l'élément et ses voisins. C'est la distance qui sépare les blocs.

Même analogie : si tu accroches deux cadres sur un mur, la distance entre les deux cadres, c'est le margin. Padding = à l'intérieur du cadre. Margin = entre les cadres.

.boite {
  margin: 20px;          /* 20px de marge partout */
  margin-top: 40px;     /* marge du haut uniquement */
  margin-bottom: 0;     /* aucune marge en bas */
  margin-left: auto;    /* voir explication ci-dessous */
}

/* Centrer un élément horizontalement avec margin auto */
.conteneur {
  width: 800px;       /* une largeur définie est nécessaire */
  margin: 0 auto;    /* haut/bas = 0, gauche/droite = automatique = centré ! */
}

Les bordures

La propriété border dessine un cadre autour d'un élément. Elle prend trois infos : l'épaisseur, le style, et la couleur.

.carte {
  /* épaisseur (1px) + style (solid) + couleur (#dde3f0) */
  border: 1px solid #dde3f0;

  /* Bordure uniquement en haut — bonne pour souligner un titre */
  border-top: 3px solid #0052e0;

  /* Bordure pointillée en bas */
  border-bottom: 1px dashed gray;

  /* Coins arrondis — très utilisé pour les cartes et boutons */
  border-radius: 12px;

  /* Cercle parfait (fonctionne si width = height) */
  border-radius: 50%;
}

Les styles de bordure disponibles

• solid — ligne continue (le plus utilisé).
• dashed — traits pointillés longs.
• dotted — petits points.
• double — double ligne.
• none — pas de bordure (pour enlever une bordure par défaut).

L'ombre portée : box-shadow

box-shadow ajoute une ombre sous un élément. Comme si une lumière l'éclairait depuis le dessus. Ça donne un effet de profondeur. C'est ce qui fait "flotter" les cartes.

.carte {
  /* décalage-x  décalage-y  flou     couleur */
  box-shadow: 0          4px      24px  rgba(9, 24, 58, 0.08);

  /* Ombre plus prononcée au survol (avec :hover) */
}
.carte:hover {
  box-shadow: 0 8px 32px rgba(9, 24, 58, 0.15);
}

Les 4 valeurs de box-shadow :

• décalage-x — horizontal. 0 = centré. Positif = droite, négatif = gauche.
• décalage-y — vertical. 4px = 4px vers le bas.
• flou — plus c'est grand, plus l'ombre est douce et étalée.
• couleur — généralement un noir ou bleu très transparent (avec rgba).