28217 sujets

CSS et mise en forme, CSS3

Le marge d'un <p> se répercute sur le <div>

Bonjour,

Je ne sais pas si le titre est très explicite, mais c'est pas évident à expliquer Smiley confus

Remarque : le problème ne concerne que IE5.0 (c'est ok sous IE5.5, 6.x et Mozilla)

Soit la structure suivante :

<div id="1">
  <div id="2">
    <p>Phrase pour essai</p>
  </div>
</div>


PS : on peut penser qu'un <div> est de trop, mais ce n'est en fait pas la question, c'est juste que j'ai voulu simplifier une page en réalité plus complexe, et justifiant ces 2 <div>

Mon <p> à un marge-bottom de 10 pixels. Et pourtant, le <div id="2"> se termine pile sous la phrase (je le vois bien en affectant une couleur de fond à ce <div>)

Et, curieusement, les 10 pixels se retrouvent entre les 2 <div>, c'est à dire que j'ai 10 pixels entre les 2.

C'est bien la marge du <p> qui en est la cause, car si je la place à 20 pixels, l'écart devient de 20 pixels, et si je le passe à 0, les 2 <div> se collent bien.

La solution est simple :

<div id="1">
  <div id="2">
    <p>Phrase pour essai</p>
    &nbsp;
  </div>
</div>


J'ai ajouté un espace insécable sous le <p>. Cela fonctionne aussi avec un bloc quelconque (au lieu de l'espace insécable) pour lequel j'aurais définis sa marge inférieure à 0.

Je pourrais donc en rester là, mais j'aimerais bien -comprendre- la raison du pourquoi. Sans parler du fait que l'emploi de l'espace insécable me chagrine.

J'en appelle donc aux professionnels des CSS ! Smiley smile
Modifié par Yhann (18 Mar 2005 - 17:43)
a écrit :
il correspond à quoi de <div> à la fin ?


Oups Smiley eek Faute de frappe. Il faut lire un </div>. Je corrige.

a écrit :
C'est une fusion de marges.


Je viens de jetter un oeil et n'y comprend pas grand chose. Mais je replonge de suite dedans.
Administrateur
http://www.aidejavascript.com/article93.html
a écrit :
Il faut noter que les marges verticales (top et bottom) s’imbriquent les unes dans les autres. Si 2 boîtes de type paragraphe se suivent, la marge inférieure de la première et la marge supérieure de la seconde ne s’ajoutent pas : seule la marge la plus grande est conservée.
Ok, donc je viens de regarder ce qu'est la fusion des marges. Je n'en avais jamais entendu parlé avant, et je vous remercie pour l'onfo, très instructive.

Maintenant, et si je comprends bien, ce phénomène de fusion de marges est normal. Mais dans mon cas, il ne se produit qu'avec IE5.0, comme dit plus haut.

Quel est, à votre avis, la meilleure façon de contourner le problème ?

Comment y remédier ?
Sujet clos
Aller à