Le modèle des boîtes

Chaque élément est une boîte : régler sa largeur, ses marges intérieures et extérieures, ses bordures.

20 min

À la fin de cette leçon, tu sauras

Comprendre content, padding, border et margin
Donner une largeur à un élément et le centrer
Arrondir les coins et ajouter une bordure

Tout est une boîte

Pour le navigateur, chaque élément de la page est un rectangle. Cette boîte a quatre couches, de l'intérieur vers l'extérieur :

le contenu (le texte, l'image) ;
le padding : l'espace intérieur, entre le contenu et la bordure ;
la bordure (border) ;
la marge (margin) : l'espace extérieur, qui éloigne la boîte de ses voisines.

.carte {
  padding: 20px;
  border: 2px solid #1d2340;
  margin: 30px;
  border-radius: 12px;
}

La bordure s'écrit en trois parties : l'épaisseur, le style (solid, dashed pour des tirets, dotted pour des points) et la couleur. border-radius arrondit les coins.

Un côté à la fois

On peut régler chaque côté séparément : padding-top, margin-left… ou en raccourci, dans le sens des aiguilles d'une montre en partant du haut :

padding: 10px 20px;          /* haut et bas : 10px, gauche et droite : 20px */
margin: 0 0 16px 0;          /* haut, droite, bas, gauche */

Largeur et centrage

width fixe une largeur. Mieux encore, max-width fixe une largeur maximale : la boîte rétrécit sur un téléphone mais ne dépasse pas sur grand écran. Pour la centrer, on met les marges gauche et droite en auto.

.carte {
  max-width: 400px;
  margin: 40px auto;
}

Astuce : par défaut, le padding et la bordure s'ajoutent à la largeur. Avec box-sizing: border-box, ils sont comptés dedans, ce qui est beaucoup plus simple. Beaucoup de sites l'appliquent à tous les éléments avec * { box-sizing: border-box; }.

À toi de jouer

Transforme la div en carte en stylant la classe .carte :

un espace intérieur de 20px ;
une bordure de 2px, continue (solid), de la couleur de ton choix ;
des coins arrondis de 12px ;
une largeur maximale de 400px.

index.html

Ton code

Résultat

La carte a un padding de 20px
La carte a une bordure continue de 2px
La bordure est de style solid
Les coins sont arrondis de 12px
La largeur maximale est de 400px

Bloqué ? Voir une solution

<style>
  .carte {
    padding: 20px;
    border: 2px solid #2f5bd3;
    border-radius: 12px;
    max-width: 400px;
  }
</style>

<div class="carte">
  <h2>Vol AF1234</h2>
  <p>Paris → Montréal, départ 10 h 35.</p>
</div>

Quiz

1Quelle propriété crée de l'espace à l'intérieur de la bordure ? margin padding border

2Que fait margin: 0 auto; sur une boîte qui a une largeur ? Elle la centre horizontalement Elle supprime sa bordure Elle la met à droite

Les marges gauche et droite en auto se partagent l'espace restant : la boîte est centrée.

3Dans padding: 10px 20px;, combien vaut le padding à gauche ? 10px 20px 0