Marges et contexte de formatage

Florens Verschelde

Résultat du test: Il est préférable de ne pas appliquer de marge à un élément définissant un contexte de formatage, lorsque cette marge doit interagir avec un flottant.

Pour créer un écart entre le flottant et le bloc, on pourra cependant attribuer la marge directement au flottant.

En détail

Cette page teste l'interprétation des marges pour un élément qui définit un contexte de formatage, via la propriété CSS overflow avec les valeurs hidden ou auto.

D'un navigateur à l'autre, on observe des différences de comportement dans l'application des marges latérales du bloc qui définit le contexte de formatage, lorsque ces marges interagissent avec un flottant.

La notion de contexte de formatage est définie ici: Float, clear et contextes de formatage – qu'est-ce qu'un contexte de formatage ?.
On notera qu'Internet Explorer 6, contrairement à la version 7, ne permet pas de définir un contexte de formatage via la propriété overflow.

Note: les tests suivant font également référence à la notion de HasLayout (via le terme de layout).

Les tests

Test 1 (un flottant)

Ce bloc est flottant et n'a pas de marge.
Ce bloc:
– définit un contexte de formatage via la déclaration CSS overflow: hidden;
– a une marge à gauche de 30px, et une marge à droite de 30px également;
– accessoirement, n'a pas le layout.

Résultats:

Test 2 (un flottant)

Ce bloc est flottant et a une marge à droite de 30px.
Ce bloc:
– définit un contexte de formatage via la déclaration CSS overflow: hidden;
– n'a pas de marge à gauche, seulement une marge à droite de 30px;
– accessoirement, n'a pas le layout.

Résultats:

Test 3 (deux flottants)

Ce bloc est flottant à gauche et n'a pas de marge.
Ce bloc est flottant à droite et n'a pas de marge.
Ce bloc:
– définit un contexte de formatage via la déclaration CSS overflow: hidden;
– a une marge à gauche de 30px, et une marge à droite de 30px;
– accessoirement, n'a pas le layout.

Résultats:

Test 4 (deux flottants)

Ce bloc est flottant à gauche et a une marge à droite de 30px.
Ce bloc est flottant à droite et a une marge à gauche de 30px.
Ce bloc:
– définit un contexte de formatage via la déclaration CSS overflow: hidden;
– n'a pas de marges;
– accessoirement, n'a pas le layout.

Résultats:

Test 5 (un flottant, contexte de formatage + HasLayout)

Ce test reprend le test 1, et ajoute le layout au bloc qui définit un contexte de formatage. Avec tous les navigateurs à l'exception d'Internet Explorer: les comportements sont inchangés par rapport au test 1. (Rappel: le HasLayout est un concept propre à Internet Explorer pour Windows).

Ce bloc est flottant à gauche et n'a pas de marge.
Ce bloc:
– définit un contexte de formatage via la déclaration CSS overflow: hidden;
– a une marge à gauche de 30px, et une marge à droite de 30px;
– a le layout via la déclaration CSS zoom: 1 (IE6 et plus).

Résultats:

Dans le cas d'Internet Explorer 6, on notera un décalage de trois pixels dû au fameux bug du Three Pixel Jog. Nous avons ignoré ce bug «marginal» dans les résultats ci-dessus. Ce bug est corrigé dans IE7.