[résolu] 3 boites simples et Firefox, décalage de marge

Arjii

27 Jul 2005 à 16:50

Bonjour a tous

Me voici de nouveau devant un problème que je ne comprends pas.
3 boites décrites de facon tout a fait standard. Elles se placent bien les une sous les autres.
Si j'insere dans la deuxieme boite un élément de type "block" (H3 , P...), la boite parent se retrouve décalée, en haut et en bas, environ 10 px.
Un truc etrange, en bidouillant (une bordure pour la deuxieme boite par exemple) le soucis disparait.
j'aimerais qu'on m'eclaire un peu car la je perds un temps monstrueux sur une broutille (?)...
allez voila le code
Merci pour votre aide Smiley cligne

<html>
<head>
<style type="text/css">
#A{
	width: 700px;
	min-height:80px;
	background-color:blue;
	padding:0;
	padding:0;
}

#B{
	min-height: 300px;
	width: 700px;
	background-color:lime;
	padding:0;
	margin:0;
}

#C{
	min-height: 80px;
	width: 700px;
	background-color:green;
	padding:0;
	margin:0;
}
P{
	margin:0;
}
</style>
</head>

<body>
<div id="Ap">
<div id="A">A</div>
<div id="B"><h1>coucou</h1></div>
<div id="C">C</div>
</body>
</html>

Modifié par Arjii (28 Jul 2005 - 10:11)

Laurent Denis

27 Jul 2005 à 20:04

C'est le mécanisme de la fusion des marges, tout à fait normal.

Tu peux le gérer facilement en déterminant les marges supérieures et inférieures de ton élément (dans ton exemple, le h1)

Arjii

28 Jul 2005 à 10:11

Merci, je ne connaissais pas ce mécanisme, je l'utilisais sans le savoir en fait.

j'ai donc trouvé un sujet ou l'on trouve un lien permettant de trouver tout un tas d'information sur la fusion des marges.
fusion de marge

Merci pour la piste