Bonjour à tous,
J'ai lu l'article sur la fusion des marges.
J'ai voulu le reproduire, pour bien comprendre. Mais dès que je spécifie une largeur à ma boite <div>, la règle :
Sans la largeur, les marges haute et basse du premier et dernier <p> ne sont pas utilisées, pas affichées :
Avec la largeur, les marges haute et basse du premier et dernier <p>, sont utilisées :
Quelle est la raison ?
Merci de votre aide.
J'ai lu l'article sur la fusion des marges.
J'ai voulu le reproduire, pour bien comprendre. Mais dès que je spécifie une largeur à ma boite <div>, la règle :
a écrit :ne s'applique plus.
Notons que la fusion des marges ne se produit que pour la marge supérieure du premier enfant et la marge inférieure du dernier enfant d’un bloc.
Sans la largeur, les marges haute et basse du premier et dernier <p> ne sont pas utilisées, pas affichées :
<div style="background: skyblue; margin: 10px;">
<p style="background: red; margin: 50px;">
Un paragraphe (fond rouge)
</p>
<p style="background: red; margin: 50px;">
Un deuxième paragraphe
</p>
<p style="background: red; margin: 50px;">
Un troixième paragraphe
</p>
</div>
Avec la largeur, les marges haute et basse du premier et dernier <p>, sont utilisées :
<div style="background: skyblue; margin: 10px; width:400px">
<p style="background: red; margin: 50px;">
Un paragraphe (fond rouge)
</p>
<p style="background: red; margin: 50px;">
Un deuxième paragraphe
</p>
<p style="background: red; margin: 50px;">
Un troixième paragraphe
</p>
</div>
Quelle est la raison ?
Merci de votre aide.