Par défaut, les navigateurs affichent les boîtes issues du document html dans l'ordre du flux normal.
Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées.
Comme dans la lecture d'un texte, il procéde verticalement, commençant en haut de l'écran pour aller jusqu'en bas, et horizontalement de gauche à droite, sur la totalité de l'espace disponible et nécessaire en largeur comme en hauteur.
Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Prenons par exemple deux blocs différenciés par leur couleur :
Code CSS:
.jaune { background-color:yellow; }
.vert { background-color:green; }
Code html:
<p class="jaune">Une boîte jaune</p> <p class="verte">Une boîte verte</p>Le résultat peut être observé ci-dessous:
Une boîte jaune
Une boîte verte
Le navigateur traite successivement les deux éléments rencontrés. Comme il s'agit d'éléments de type bloc, il aligne la marge gauche de chaque élément sur la marge gauche de l'élément conteneur, c'est à dire ici le bloc conteneur initial.
Les principaux éléments créant des boîtes bloc sont :
Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale.
Prenons par exemple deux portions de texte différenciées par leur couleur :
Code CSS:
.jaune { background-color:yellow; }
.vert { background-color:green; }
Code html:
<p> <span class="jaune">Une boîte jaune</span> <span class="verte">Une boîte verte</span> </p>Le résultat peut être observé ci-dessous:
Une boîte jauneUne boîte verte
Les principaux éléments créant des boîtes en ligne sont :