Positionnez vos boîtes !

Flux d'un document

Le navigateur utilise le flux pour effectuer la mise en pages des éléments XHTML et suit le flux des éléments de haut en bas en affichant au fur et à mesure chacun des éléments qu'il rencontre. Pour les éléments de type bloc, il place un saut de ligne entre chacun. Le premier élément d'un fichier est le premier à s'afficher, un saut de ligne lui succède, puis le second s'affiche, suivi d'un saut de ligne et ainsi de suite de haut en bas du fichier.

Les éléments en-ligne se placent quant à eux les uns à côté des autres depuis le coin en haut à gauche jusqu'à celui en bas à droite tant qu'il reste de la place sur la largeur de la page. Notez que le texte est un cas à part: le navigateur le fragmente en éléments en-ligne dont la taille s'adapte à l'espace disponible. Si nous réduisons la taille de la fenêtre du navigateur ou celle de l'aire de contenu avec la propriété width, le navigateur se sert d'autant de lignes que nécessaires pour placer le flux du contenu dans l'espace imparti.

Quand le navigateur place côte à côte des éléments en-ligne ayant chacun une marge, il met suffisamment d'espace entre les deux pour que les deux marges soient prises en compte. Par contre, lorsque le navigateur place deux éléments de bloc l'un au-dessus de l'autre, il fusionne leurs marges communes. La hauteur de la marge après fusion est celle de la marge la plus importante.

Remarquez finalement que lorsque deux éléments imbriqués possèdent chacun leurs marges, celles-ci fusionnent. Néanmoins, si l'élément extérieur comporte une bordure, les marges ne se touchent pas et, par conséquent, ne fusionnent pas.