Formation Apprendre le CSS : Le modèle de boîte

Dans ce chapitre nous allons voir une notion essentielle en CSS : le modèle de boîte. C'est ce modèle qui permet de comprendre comment les éléments HTML occupent l'espace dans une page, comment ils se dimensionnent.

Le modèle de boîte

Si on inspecte un élément dans les outils de développement du navigateur, on voit apparaître une représentation de cette boîte.

Au centre, on retrouve la largeur et la hauteur du contenu. Autour, on a le padding, puis la border, puis enfin la margin.

Les marges extérieures avec margin

La propriété margin sert à créer de l'espace autour d'un élément.

nav {
  margin-bottom: 20px;
}

Ici, on ajoute 20px d'espace sous l'élément. On peut cibler chaque côté individuellement :

margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-inline: 20px; /* Marge sur la gauche / droite */
margin-block: 20px; /* Marge au dessus / dessous */

Comme souvent en CSS, on peut utiliser la forme raccourcie :

margin: 20px;
margin: 20px 10px;
margin: 20px 10px 5px 0;

Le fonctionnement est le suivant :

• 1 valeur : tous les côtés
• 2 valeurs : haut/bas puis droite/gauche
• 4 valeurs : haut, droite, bas, gauche

Les marges intérieures avec padding

Le padding ressemble à margin, mais il agit à l'intérieur de l'élément.

nav {
  padding: 10px;
}

Ici, on crée de l'espace entre le contenu de la nav et sa bordure. Visuellement, si l'élément a un fond, on verra ce fond s'étendre.

C'est la différence fondamentale entre margin et padding :

• margin éloigne l'élément des autres
• padding augmente l'espace intérieur de l'élément

Comme pour margin, on retrouve :

• padding-top, padding-right, padding-bottom, padding-left
• padding-inline
• padding-block
• la syntaxe raccourcie padding

Largeur et hauteur

Par défaut, un élément comme nav ou div prend toute la largeur disponible.

On peut cependant définir explicitement ses dimensions :

nav {
  width: 300px;
  height: 100px;
}

Ici, on impose une largeur de 300px et une hauteur de 100px.

On peut aussi utiliser des pourcentages :

nav {
  width: 50%;
}

Dans ce cas, la largeur est calculée par rapport à la dimension de l'élément parent.

Les différents types de display

Jusqu'ici, on pourrait croire que tous les éléments se comportent pareil. Pourtant, ce n'est pas le cas. C'est là qu'intervient la propriété display.

Suivant la valeur de display, un élément n'occupe pas l'espace de la même manière.

Les trois comportements de base à connaître sont :

• block
• inline
• inline-block

Les éléments block

Le comportement block est celui de nombreux éléments comme div, article, section ou nav.

Un élément block :

• commence sur une nouvelle ligne
• occupe toute la largeur disponible par défaut (width: auto)
• accepte une largeur et une hauteur

Par exemple :

<div>Bonjour</div>
<div>Les gens</div>

Même sans style particulier, ces deux éléments s'empilent naturellement.

Si on leur donne une largeur plus petite :

div:first-child {
  width: 100px;
}

div:last-child {
  width: 200px;
}

Ils restent sur deux lignes distinctes. C'est le comportement normal d'un élément de type bloc.

Les éléments inline

Les éléments inline, comme span ou a, sont des éléments texturels avec 2 particularités :

• ils ne provoquent pas de retour à la ligne
• width et height n'ont pas d'effet sur eux

<span>Bonjour</span> <span>Les gens</span>

Ces deux éléments restent côte à côte.

Et même si on écrit :

span {
  width: 200px;
}

Cette largeur sera ignorée. Un élément inline prend simplement la taille de son contenu.

Les éléments inline-block

inline-block est une sorte d'entre-deux :

• l'élément reste dans le flux du texte, donc il peut rester sur la même ligne
• mais il accepte aussi une largeur et une hauteur

On retrouve ce comportement sur certains éléments de formulaire comme input.

input {
  width: 50%;
  height: 40px;
}

Ici, l'input peut rester à côté d'un label tout en acceptant des dimensions explicites.

Changer le comportement avec display

La propriété display permet de changer la manière dont un élément se comporte.

Par exemple, si on transforme des liens en blocs :

nav a {
  display: block;
}

Les liens vont :

• prendre toute la largeur disponible
• s'empiler les uns en dessous des autres

Ils se comporteront alors comme des div.

À l'inverse, on peut parfois utiliser inline-block pour garder des éléments côte à côte tout en leur donnant une largeur (pour les éléments de formulaire par exemple).

flex et grid

Il existe aussi d'autres valeurs de display très importantes :

• flex
• grid

nav {
  display: flex;
}

.list {
  display: grid;
}

Ces modes sont essentiels pour les mises en page modernes, mais ils ont suffisamment de particularités pour mériter des chapitres à part entière.

Pour l'instant, ce qu'il faut retenir, c'est que display ne change pas seulement l'apparence d'un élément : il change aussi profondément sa manière d'occuper l'espace.

box-sizing

Une autre propriété très importante du modèle de boîte est box-sizing.

Par défaut, CSS utilise :

box-sizing: content-box;

Cela signifie que la largeur définie avec width correspond uniquement à la zone de contenu. Le padding vient ensuite s'ajouter par-dessus.

Par exemple :

nav {
  width: 100%;
  padding: 15px;
}

Avec le comportement par défaut, l'élément peut déborder, car on obtient :

• 100% de contenu
• plus 15px de padding à gauche
• plus 15px de padding à droite

Pour éviter ce problème, on préfère souvent utiliser :

box-sizing: border-box;

Dans ce cas, la largeur inclut le padding et la border.

* {
  box-sizing: border-box;
}

C'est une pratique très courante, car elle rend les calculs de largeur beaucoup plus intuitifs.

La fusion des marges

Un comportement du CSS surprend souvent au début : la fusion des marges.

h1 {
  margin-bottom: 30px;
}

nav {
  margin-top: 30px;
}

On pourrait s'attendre à 60px d'espace entre les deux éléments. Pourtant, ce n'est pas ce qui se passe.

Les marges verticales adjacentes fusionnent. On n'obtient donc pas une addition, mais une seule marge commune.

Les marges négatives

Les marges peuvent aussi être négatives :

nav {
  margin-top: -30px;
}

Dans ce cas, l'élément remonte et vient empiéter sur l'espace voisin.

Ce n'est pas quelque chose qu'on utilisera tous les jours, mais il faut savoir que c'est possible. Cela peut parfois dépanner pour contrebalancer une marge existante ou faire déborder un élément sur un autre.

Le cas particulier des images

Par défaut, une image garde sa taille naturelle. Si elle est plus grande que son conteneur, elle peut déborder.

Une approche très courante consiste à écrire :

img {
  width: 100%;
  height: auto;
}

Ici :

• width: 100% fait en sorte que l'image prenne toute la largeur disponible
• height: auto permet de conserver son ratio

Sans height: auto, l'image pourrait être écrasée ou déformée.

min-content et max-content

Pour width ou height, il existe aussi des valeurs particulières :

• max-content
• min-content

nav {
  width: max-content;
}

Avec max-content, l'élément prend juste la place nécessaire pour contenir son contenu sans retour à la ligne.

nav {
  width: min-content;
}

Avec min-content, le navigateur essaie au contraire de réduire l'élément au minimum possible tout en contenant encore son contenu.

Ce sont des valeurs très pratiques dans certaines mises en page un peu complexes.

aspect-ratio

Enfin, CSS propose une propriété très utile pour conserver un ratio entre largeur et hauteur :

.video {
  aspect-ratio: 16 / 9;
}

On peut aussi faire :

.square {
  aspect-ratio: 1 / 1;
}

Cela permet par exemple :

• de créer des carrés
• de réserver la bonne place pour une vidéo
• de garantir un format précis à un bloc ou une image

Si on fixe ensuite une largeur :

.square {
  width: 200px;
  aspect-ratio: 1 / 1;
}

La hauteur sera automatiquement calculée pour respecter ce ratio.