Marges et contexte de formatage

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:

Firefox 2: OK.
Opera 9: la marge de gauche est absente, et celle de droite est doublée à 60px!
Safari 3b: la marge de gauche est absente, et celle de droite est doublée à 60px!
Internet Explorer 7: la marge de gauche est ignorée.
Internet Explorer 6: pas de problème de marge, mais le contexte de formatage n'est pas appliqué et le deuxième bloc passe sous le flottant.

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:

Firefox 2: OK.
Opera 9: OK.
Safari 3b: OK.
Internet Explorer 7: OK.
Internet Explorer 6: pas de problème de marge, mais le contexte de formatage n'est pas appliqué et le deuxième bloc passe sous le flottant.

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:

Firefox 2: OK.
Opera 9: aucune marge n'est appliquée.
Safari 3b: la marge de gauche est absente, et celle de droite est doublée à 60px!
Internet Explorer 7: aucune marge n'est appliquée.
Internet Explorer 6: pas de problème de marge, mais le contexte de formatage n'est pas appliqué et le deuxième bloc passe sous les flottants.

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:

Firefox 2: OK.
Opera 9: OK.
Safari 3b: OK.
Internet Explorer 7: OK.
Internet Explorer 6: pas de problème de marge, mais le contexte de formatage n'est pas appliqué et le deuxième bloc passe sous les flottants.

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:

Internet Explorer 7: pas de changement particulier par rapport au test 1: la marge de gauche est toujours ignorée, et celle de droite correctement appliquée.
Internet Explorer 7: la marge de gauche est ignorée, et celle de droite correctement appliquée.

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.

Conclusion

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.