Le modèle de boîte, les unités et les couleurs

Voici la clé de voûte de la mise en page : en CSS, tout élément est une boîte. Une image, un titre, un paragraphe, un lien : des rectangles posés les uns à côté ou au-dessus des autres. Comprendre la taille de ces boîtes, leurs espaces et la manière de les mesurer vous évitera la plupart des surprises de mise en page. Dans cette leçon, vous ajoutez de l’air au portfolio de Camille et vous choisissez une palette de couleurs.

Les quatre couches d’une boîte

Chaque boîte est composée, de l’intérieur vers l’extérieur, de quatre couches. Pensez à un cadre accroché au mur :

• le contenu (content) : la photographie elle-même ;
• le remplissage (padding) : le passe-partout, l’espace entre le contenu et le cadre ;
• la bordure (border) : le cadre lui-même ;
• la marge (margin) : l’espace entre ce cadre et ses voisins sur le mur.

.carte {
  width: 320px;
  padding: 16px;
  border: 2px solid #1d4e5f;
  margin: 24px;
}

Le padding est à l’intérieur de la boîte (il prend la couleur de fond de l’élément), alors que la margin est à l’extérieur (transparente). Ouvrez l’inspecteur sur un élément : un schéma coloré représente ces quatre couches avec leurs valeurs, un outil précieux pour comprendre un espacement.

Écrire les marges et les remplissages

margin et padding admettent plusieurs notations raccourcies :

padding: 16px;              /* les 4 côtés */
padding: 8px 16px;          /* haut et bas, puis gauche et droite */
padding: 8px 16px 24px;     /* haut, gauche et droite, bas */
padding: 8px 16px 24px 4px; /* haut, droite, bas, gauche (sens horaire) */
margin-top: 2rem;           /* un seul côté */

Retenez que l’ordre à quatre valeurs suit le sens des aiguilles d’une montre, en partant du haut. Une marge peut aussi valoir auto : margin: 0 auto; centre horizontalement un bloc dont la largeur est définie.

Le calcul de la taille : box-sizing

Par défaut, la largeur (width) ne concerne que le contenu : le padding et la bordure s’ajoutent. Une boîte de width: 300px avec un padding de 20 px et une bordure de 2 px occupe donc 344 px de large. C’est contre-intuitif, et source de débordements.

La propriété box-sizing: border-box change le calcul : la largeur inclut alors padding et bordure. Pour une boîte de width: 300px, le contenu s’ajuste, l’ensemble occupe 300 px. La plupart des développeurs commencent leur feuille par ce réglage :

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

Blocs et éléments en ligne

Un élément a une valeur par défaut de la propriété display :

• block : occupe toute la largeur disponible et passe à la ligne (div, p, h1, section…). On peut régler sa largeur, sa hauteur et ses marges verticales ;
• inline : s’insère dans le flux du texte (a, strong, span…). Largeur et hauteur ne s’appliquent pas ;
• inline-block : se place dans la ligne comme du texte, mais accepte largeur, hauteur et marges ;
• none : l’élément disparaît complètement (et n’est plus lu par les lecteurs d’écran).

Nous verrons au chapitre suivant deux autres valeurs puissantes, flex et grid.

Les unités de mesure

CSS propose deux grandes familles d’unités.

Les unités absolues

Le pixel (px) est l’unité de base à l’écran. Elle est fiable pour les bordures fines (1px) ou des tailles fixes de petites icônes. Les autres unités absolues (cm, pt…) sont surtout utiles pour l’impression.

Les unités relatives

Pourquoi préférer rem pour les tailles de texte ? Parce qu’il respecte le réglage de taille de police choisi par l’utilisateur dans son navigateur. Une personne malvoyante qui a agrandi sa police par défaut verra votre site s’adapter ; avec des px, ce réglage est ignoré dans plusieurs cas.

body { font-size: 1rem; }       /* taille choisie par l’utilisateur */
h1   { font-size: 2.5rem; }     /* 2,5 fois cette taille */
.contenu {
  max-width: 65ch;              /* lignes de texte lisibles */
  margin: 0 auto;
  padding: 0 1rem;
}

max-width est la propriété idéale pour des contenus fluides : l’élément s’élargit avec l’écran, mais jamais au-delà d’une limite confortable. Ses cousines, min-width, min-height et max-height, fonctionnent de la même façon.

Les couleurs

CSS accepte plusieurs notations pour une même couleur :

• un nom : tomato, navy, white (environ 140 noms standard) ;
• un code hexadécimal : #1d4e5f (rouge, vert, bleu en base 16) ; la version courte #fff équivaut à #ffffff ;
• rgb() : rgb(29 78 95) ; avec transparence : rgb(29 78 95 / 50%) ;
• hsl() : hsl(193 53% 25%) – teinte (0 à 360°), saturation, luminosité. Cette notation est la plus intuitive pour créer des variantes : on garde la teinte et on joue sur la luminosité.

Pour la transparence, opacity s’applique à l’élément entier (texte compris), tandis qu’une couleur avec canal alpha (rgb(0 0 0 / 40%)) ne rend transparente que la couleur elle-même.

Composer une palette simple

Pour un site personnel, quatre à cinq couleurs suffisent : une couleur principale, une couleur d’accent, un fond clair, un texte foncé, et éventuellement un gris pour les détails. Le portfolio de Camille utilisera :

• principal : #1d4e5f (bleu-vert profond) ;
• accent : #e0a96d (ocre) ;
• fond : #fafaf7 (blanc cassé) ;
• texte : #222222 (presque noir).

Appliquer le tout au portfolio

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

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #222222;
  background-color: #fafaf7;
}

header, main, footer {
  padding: 1.5rem 1rem;
}

main {
  max-width: 60rem;
  margin: 0 auto;
}

.carte {
  background-color: white;
  border: 1px solid #e3ded3;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

À vous de jouer

Dans votre feuille de style :

1. ajoutez la règle box-sizing: border-box pour tous les éléments ;
2. centrez le contenu principal avec une largeur maximale et des marges automatiques ;
3. donnez aux cartes de projet une marge, un padding et une bordure ;
4. définissez une palette de quatre couleurs et appliquez-les au fond, au texte, aux titres et aux liens.

Dans l’inspecteur, ouvrez le schéma de boîte d’une carte et vérifiez que les valeurs correspondent.

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

body {
  margin: 0;
  background-color: #fafaf7;
  color: #222222;
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem;
}

h1, h2, h3 { color: #1d4e5f; }
a { color: #1d4e5f; }

.carte {
  border: 1px solid #1d4e5f;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: white;
}

À la leçon suivante, vous soignez la typographie et les finitions : polices, fonds, bordures arrondies et ombres.