[Résolu] Problème de compréhension relatif aux marges des boîtes

Bonjour,

J'espère ne pas trop encombrer le forum avec cette question sur le modèle de boîte, mais je n'ai pas encore trouvé la réponse.

Ma question fait suite à ma lecture attentive du livre "CSS 2 Pratique du design Web" (première édition). Au chapitre 7, page 104 exactement, dans l'exemple donné, le paragraphe remplit tout l'espace de son conteneur le bloc div. Pour rappel, voici l'exemple concerné :

code HTML :

<div><p>paragraphe de texte</p></div>

code CSS :

div {
background:yellow;
}

p {
background:green;
}

J'avoue ne pas comprendre pourquoi seul le paragraphe vert est visible. En effet, par défaut, ses marges externes ne sont pas nulles. Elles devraient donc dégager un espace autour du paragraphe. Et comme mon bon sens me dit que cet espace est également contenu dans le div, il devrait laisser apparaître la couleur jaune du bloc div, même si les marges par défaut du bloc div sont nulles.

D'ailleurs, lorsqu'on définit une marge interne non nulle du bloc div, l'espace défini par la marge externe du paragraphe est cette fois bien pris en compte. Pour s'en rendre compte, il suffit de jouer avec la marge externe supérieure du paragraphe (comme dans l'exemple ci-dessous), puis de la ramener à 0 :

div {
  padding-top:10px;
  background:yellow;
}

p {
  margin-top:20px;
  background:orange;
}

Alors pourquoi la marge externe du paragraphe n'est pas prise en compte de la même manière dans le cas d'une marge interne nulle de son conteneur ? Est-ce un comportement "standard" ? Mon bon sens m'assure que non.

Merci pour toute explication.
Modifié par patoutis (10 Apr 2007 - 17:00)

Bonjour et bienvenue à toi,
fais bien attention à mettre tous tes codes à l'aide de la balise [code]
Tu es sur un cas de fusion des marges et c'est bien un comportement standard.
Voir ces explications
Modifié par Hermann (04 Apr 2007 - 18:59)

Merci pour le lien Hermann. Mais je suis un peu déçu, rien ne me paraît justifier cette fusion des marges, cela va à l'encontre du bon sens (en tout cas du mien).

patoutis a écrit :
Merci pour le lien Hermann. Mais je suis un peu déçu, rien ne me paraît justifier cette fusion des marges, cela va à l'encontre du bon sens (en tout cas du mien).

Si, les normes le justifient.

Et cela permet que les documents HTML sans CSS soient lisibles.

Je te propose moi aussi un petit lien à ce sujet.

Ok Julien, merci pour le lien.