Test : blocs imbriqués et fusion des marges

Problème observé

Lorsque deux éléments de type blocs sont imbriqués, les marges de ces deux éléments peuvent fusionner dans certaines conditions... Par exemple dans l'exemple suivant :

HTML :

<div class="cadre">
	<div class="page">
		<p>Paragraphe de test.</p>
		<p>Deuxième paragraphe.</p>
	</div>
</div>

Et CSS :

div.cadre {
	background: skyblue;
}
div.page {
	margin: 2em;
	background: lightsalmon;
}

Ce qui nous donne :

Paragraphe de test.

Deuxième paragraphe.

On remarque que les marges verticales (en haut et en bas) du bloc de classe page et du bloc de classe cadre sont fusionnées en une seule, qui s'applique au bloc parent. Par contre, les marges horizontales (gauche et droite) ne sont pas concernées par cette fusion des marges.

Quoi qu'il en soit, si l'on voulait obtenir un effet avec une bordure bleu ciel (couleur de fond du bloc parent) autour de notre bloc saumon clair (couleur de fond du bloc enfant), c'est raté.

[Note : le même phénomène se produit pour la marge supérieur du premier paragraphe, et pour la marge inférieure du dernier paragraphe.]

Quelles solutions ?

Plusieurs propriétés permettent de forcer les navigateurs à ne pas fusionner les marges. J'ai pu obtenir ce comportement avec les propriétés CSS de formatage de bloc suivantes :

  1. Une bordure (propriété border) appliquée à l'élément parent (un border-top forcera le navigateur à ne pas fusionner les marges supérieures, tandis qu'un border-bottom le forcera à ne pas fusionner les marges inférieures – les bordures latérales ne seront pas nécessaires) ;
  2. Un padding appliqué à l'élément parent. Là encore, on pourra se contenter de padding-top et de padding-bottom.
  3. La propriété overflow avec les valeurs auto ou hidden ;

De même, plusieurs propriétés de positionnement des blocs auront un comportement similaire. Cependant, elles auront des répercussions importantes sur le rendu des blocs. On les utilisera donc avec une certaine modération.

  1. Bloc flottant à droite ou à gauche grâce à la propriété float et aux valeurs left et right ;
  2. Bloc doté de la propriété display avec la valeur table-cell ;
  3. Bloc en positionnement absolu (position: absolute;) ou en positionnement fixe (position: fixed;).

Exemples :

Bloc conteneur avec bordures verticales

CSS : .cadre {border-top: solid 1px black; border-bottom: solid 1px black;}

Paragraphe de test.

Deuxième paragraphe.

[Note : rien n'empêche d'utiliser des bordures transparentes en utilisant le code couleur transparent]

Bloc conteneur avec padding inférieur et supérieur

CSS : .cadre {padding: 1px 0;}

Paragraphe de test.

Deuxième paragraphe.

Bloc conteneur flottant

CSS : .cadre {float: left;}

Paragraphe de test.

Deuxième paragraphe.

Testé avec :

Ces trois exemples ont été testés avec :

Propriétés spécifiques (ne marchent qu'avec certains navigateur) :

Bloc conteneur avec propriété overflow

CSS : .cadre {overflow: auto;}

Paragraphe de test.

Deuxième paragraphe.

[Note : cette solution ne fonctionne pas avec Internet Explorer 6]

Bloc conteneur avec affichage de type cellule de tableau

CSS : .cadre {display: table-cell;}

Paragraphe de test.

Deuxième paragraphe.

[Note : cette propriété n'est pas implémentée par Internet Explorer pour Windows !]

Testé avec :

Ces deux derniers exemples ont été testés avec :