28172 sujets

CSS et mise en forme, CSS3

[Résolu] Margin-top d'un bloc enfant qui se répercute sur le parent

Bonjour,

Je suis confrontée à un phénomène que j'arrive pas à comprendre uniquement sous Firefox. Si je crée un bloc et qu'à l'intérieur j'y place un nouveau bloc avec un margin-top alors le parent hérite également de cet marge sous Firefox uniquement. Un truc encore plus étranger si on ajoute au bloc parent une bordure, il n'hérite plus de la marge Smiley confus
Code correspondant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Test</title>
	<style type="text/css">
		* { padding: 0px; margin: 0px; }
	
		#contain {
			background-color: #666;
			width: 960px;
			height: 760px;
                        /* border: 1px solid red; */
		}
		
		p { margin-top: 20px; }
	</style>
</head>
	
<body>
	<div id="contain">
		<p>zut zut zut</p>
	</div>
</body>
</html>


Voilà, si quelqu'un a une idée ca m'intéresse de comprendre pourquoi ca fait ça.
Merci d'avance et bonne journée Smiley cligne

Misst1get
Modifié par misst1get (17 Mar 2008 - 11:52)
Bonjour,

Ce phénomène parfaitement standard s'appelle la fusion des marges.
Tu trouveras plus d'informations à ce sujet sur MDC: CSS:Fusion des marges.


edit: grillé de 8 petites secondes par la chef. Smiley bawling
Modifié par Benjamin D.C. (17 Mar 2008 - 11:49)
Merci à tous les deux, je ne connaissais pas ce phénomène. C'est plus clair pour moi maintenant Smiley langue .
Bonne journée

Misst1get
Au passage, misst1get, il te manque 2 attributs importants au niveau de la balise ouvrante html:

• l'espace de nom xmlns ayant pour valeur l'URL http://www.w3.org/1999/xhtml, son absence invalidant ton document
• la langue principale du document déclarée conjointement par xml:lang et lang
Sujet clos
Aller à