Boîtes, unités et texte

Ce que tu vas apprendre

• Voir chaque élément comme une boîte avec contenu, marge intérieure, bordure et marge extérieure.
• Choisir entre px, rem, % et les autres unités.
• Régler la police, la taille et l'interligne du texte.

Tout est une boîte

Pour le navigateur, chaque élément est un rectangle. Prends une carte de recette :

.recette {
  width: 300px;
  padding: 16px;
  border: 2px solid darkred;
  margin: 24px;
}

Le modèle de boîte décrit ce rectangle en quatre couches, de l'intérieur vers l'extérieur :

La marge extérieure est toujours transparente. La couleur de fond (background-color) couvre le contenu et la marge intérieure.

Écrire les côtés

Les propriétés margin et padding acceptent de 1 à 4 valeurs :

.recette {
  padding: 16px;              /* les 4 côtés */
  padding: 8px 16px;          /* haut et bas, puis gauche et droite */
  padding: 8px 16px 4px 0;    /* haut, droite, bas, gauche */
}

Pour le sens des 4 valeurs, retiens le sens des aiguilles d'une montre en partant du haut. Pour un seul côté, utilise margin-top, padding-left, etc.

La bordure se règle en une ligne : border: épaisseur style couleur;. Pour des coins arrondis, ajoute border-radius: 8px;.

Le piège de la largeur

Par défaut, width: 300px ne mesure que le contenu. La marge intérieure et la bordure s'ajoutent : ta boîte pèse ici 300 + 2 × 16 + 2 × 2 = 336 px. C'est source de débordements.

La propriété box-sizing change ce calcul. Avec border-box, la largeur inclut la marge intérieure et la bordure :

*, *::before, *::after {
  box-sizing: border-box;
}

Cette règle, très répandue, s'applique à tous les éléments. Une boîte de width: 300px mesure alors vraiment 300 px, quoi que tu ajoutes dedans.

Les unités de longueur

Une dimension se compose d'un nombre et d'une unité. Voici les plus utiles :

Le rem est une bonne base pour les tailles de texte et les espacements. Si un visiteur agrandit la taille de texte dans son navigateur, ta page suit. Les px ne suivent pas.

.recette {
  max-width: 40rem;
  margin-inline: auto;
}

max-width fixe un maximum sans bloquer les petits écrans. margin-inline: auto centre horizontalement un bloc dont la largeur est définie.

La typographie de base

Quatre propriétés règlent l'essentiel du texte :

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: normal;
}

• font-family liste des polices par ordre de préférence. La dernière est une famille générique (serif, sans-serif, monospace) qui sert de secours. Les noms avec espaces prennent des guillemets.
• font-size donne la taille.
• line-height règle l'interligne. Une valeur sans unité (1.6) se multiplie par la taille du texte : c'est la façon recommandée.
• font-weight règle l'épaisseur : normal, bold ou un nombre de 100 à 900.

Pour l'alignement, text-align accepte left, center, right et justify. Pour souligner ou non, text-decoration.

Un exemple complet

Mets les pièces ensemble pour une carte de recette lisible :

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.recette {
  max-width: 24rem;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
}

À retenir

• Chaque élément est une boîte : contenu, padding, border, margin.
• box-sizing: border-box fait inclure la marge intérieure et la bordure dans la largeur.
• margin et padding acceptent 1 à 4 valeurs, dans le sens des aiguilles d'une montre depuis le haut.
• Préfère rem aux px pour les tailles de texte et les espaces : la page respecte les réglages du visiteur.
• line-height s'écrit de préférence sans unité, autour de 1.5 à 1.6 pour du texte courant.
• font-family se termine toujours par une famille générique de secours.