Le modèle de boîtes

Les boîtes (balises) de type "bloc"

Par défaut, les blocs se placent les uns en dessous des autres. Mais ici on a utilisé la propriété display:inline-block;
Une balise de type bloc prend 100% de la largeur de son parent, sauf les espaces par défaut (margin autour de la boîte + padding à l'intérieur du body).
Les blocs peuvent être dimensionnés.

Les boîtes jaunes étaient des DIV. Ceci est une boîte verte, il s'agit d'un P, qui occupe 30% de la largeur de son container.

Les boîtes (balises) de type "en ligne"

Par défaut, les balises en ligne se placent les unes à côté des autres. Ceci est une boîte orange, il s'agit d'un SPAN. Elles ne peuvent pas être dimensionnées. Ceci est une boîte brune, il s'agit d'un STRONG.

Des boîtes imbriquées

Ceci est une boîte bleue, il s'agit d'un P.

Ceci est une boîte bleue, il s'agit d'un P. Il n'occupe pas toute la largeur du div qui le contient car on a défini un padding de 20px pour ce dernier.

Ceci est une boîte bleue, il s'agit d'un P.

La propriété CSS3 box-sizing

Intro: Le box model CSS

Les propriétés width et heigth NE définissent PAS la taille totale d'un élément.

Selon le site du W3 schools :
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height).

La propriété CSS3 box-sizing est utilisée pour modifier le modèle de boîte CSS par défaut, elle permet de modifier la méthode de calcul des dimensions d’une boîte.

Box-sizing accepte 3 valeurs : Voir la propriété box-sizing sur le site du W3 schools

Minima-maxima

On a défini un min-width et max-width.