Bon, disons qu'on a la page suivante (celle de rockfef mais un peu standardisée au passage) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
div#cadre {
background: red;
}
div#page {
margin: 10em;
background: #fed;
}
</style>
</head>
<body>
<div id="cadre">
<div id="page">
<p>Test.</p>
<p>Deuxième paragraphe.</p>
</div>
</div>
</body>
</html>
Qu'observe-ton ? Les marges de gauche et de droite passent normalement, mais les marges de haut et de bas sont appliquées non pas à la div#page, mais à l'élément
body...
Cela semble venir du fait que la div#cadre est "vide"... De fait, si on rajoute du texte au début ou à la fin de cette div, on voit apparaître les marges de la div#page.
Autre solution :
div#cadre {
border: solid 1px black;
background: red;
}
div#cadre div#page {
border: solid 1px blue;
margin: 10em;
background: #fed;
}
Et hop, tout marche. On remarque aussi que par rapport au premier test, les marges par défaut des paragraphes sont prises en compte, alors qu'elles ne l'étaient pas jusqu'ici.
On arrive à reproduire ce genre de comportement par d'autres moyens, visibles en commentaires dans la feuille de styles suivante :
div#cadre {
/* [Solution 1] overflow: auto; [ou bien] overflow: hidden; */
/* [Solution 2]
border-top: solid 1px transparent;
border-bottom: solid 1px transparent; */
/* [Solution 3] padding: 1px; */
/* [Solution 4] display: table-cell; */
/* [Solution 5] float: left; */
/* [Solution 6] position: absolute; [ou bien] position: fixed; */
background: red;
}
div#cadre #page {
margin: 10em;
background: #fed;
}
Les solutions ci-dessus sont classées par ordre de préférence, de la moins intrusive à la plus intrusive (Note : je ne suis pas assez expert en CSS pour dire exactement quelle propriété aura des effets secondaires fâcheux ou pas... c'est donc un classement très aproximatif, et peut-être même erroné).
Tout cela doit être lié à des histoires de contexte de formatage de bloc (ou un truc du genre). Mister Laurent Denis, plus d'infos là-dessus ? Déjà deux ou trois articles en ligne sur ce sujet sur Blog&Blues ?
C'est assez bizarre, d'habitude c'est plutot IE qui interprete mal.
