Chaque balise de votre page HTML sera représentée à l'écran à l'aide d'une boite rectangulaire qui contiendra le contenu.
Les boites possèdent une propriété display qui est généralement sur inline ou sur block. La propriété inline va placer la boite sans retour à la ligne (de base comme strong, img par exemple), block va les placer à la ligne directement (de base comme p, li par exemple). La balise div est la balise block générique, la balise span est la balise inline générique.
Le contenu sera dans la boite rouge sombre, le reste ajustera sa position.
paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 strong strong strong strong strong strong strong strong paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1 paragraphe 1
paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2 paragraphe 2
paragraphe 3
paragraphe 3
Display dispose d'autres propriétés, la propriété flex est très intéressante car elle permet la mise en page automatique de plusieurs éléments (verticalement et/ou horizontalement) regarder l'exemple ci-dessous.
Surtout la mise en page s'adapte à la taille de la fenêtre !
Étrangement, Le contenu d'une boite peut sortir de la boite et cela peut causer des problèmes quand la dimension de la fenêtre change et qu'on modifie des propriété de style.
On peut aussi avoir du contenu qui s'adapte à une forme.