28172 sujets

CSS et mise en forme, CSS3

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 :
a écrit :
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.
ne s'applique plus.
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.
La largeur n'aura une influence quelconque qu'avec Internet Explorer 6-7 (pas 8), à cause du HasLayout. C'est mentionné à la fin de l'article dans la partie «Fusion des marges, Internet Explorer et HasLayout».

Dans quels navigateurs as-tu testé tes exemples? Tes pages de test étaient bien évidemment en mode Standard (avec Doctype qui va bien et tout) et pas en mode Quirks?

a écrit :
Sans la largeur, les marges haute et basse du premier et dernier <p> ne sont pas utilisées, pas affichées

Dans cet exemple, avec ou sans largeur, et pour tout navigateur conforme:
- la marge supérieure du premier paragraphe fusionnera avec la marge supérieure du conteneur, pour donner une marge unique appliquée sur le conteneur;
- la marge inférieur du premier paragraphe fusionnera avec la marge supérieure du deuxième paragraphe;
- la marge supérieure du dernier paragraphe fusionnera avec la marge inférieure de l'avant-dernier paragraphe;
- la marge inférieure du dernier paragraphe fusionnera avec la marge inférieure du conteneur, pour donner une marge unique appliquée sur le conteneur.