28217 sujets

CSS et mise en forme, CSS3

[résolu]Différence de comportement avec margin-top

Bonjour,

Mon titre n'est pas très bon mais un petit exemple va vous faire comprendre de quoi il est question. C'est un cas on ne peut plus simple :

Soit une <div> (bloc1) d'une certaine hauteur (300px) à l'intérieur duquel je place un autre <div> (bloc2) d'une hauteur inférieure (30px).

- Si j'applique du margin-left au bloc2, il se décale, comme attendu, à l'intérieur du bloc1

en revanche
- si j'applique du margin-top au bloc2, il se décale bien comme attendu à l'intérieur du bloc 1 avec Internet Explorer, mais avec FireFox, Netscape, Opera, le résultat est tout différent : le résultat revient exactement au même que si j'avais appliqué le même margin-top au bloc1 !!

Donc, questio n :
Pourquoi cette différence entre "margin-left" et "margin-top" avec Firefox, Netscape et Opera. Peut on considérer cela comme un défaut de leur part ?

Exemple : Ici

code : 
<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
}
#bloc1 {
	height: 300px;
	background-color: #66CCFF;
	
}
#bloc2 {
	height: 40px;
	background-color: #6600CC;
	margin-top: 50px;
	margin-left: 30px;
}

-->
</style>
</head>
<body>
<div id="bloc1">
  <div id="bloc2"></div>
</div>
</body>


C'est si simple que l'explication doit figurer dans la FAQ ou dans des tutos, mais je n'ai pas trouvé...
Modifié par Alan (06 Jan 2006 - 14:28)
cela fonctionne correctement si ton bloc1 n'est pas vide. 
<div id="bloc1">blablabla

  <div id="bloc2"></div>

</div>



sinon, je vais faire comme toi, je vais attendre la bonne parole des experts Smiley cligne
Philippe a écrit :
cela fonctionne correctement si ton bloc1 n'est pas vide. 

<div id="bloc1">blablabla

  <div id="bloc2"></div>

</div>


Oui.

De même que si bloc1 est doté d'une bordure (supérieure) ou d'un padding (supérieur), il n'y a plus fusion de marges.

En fait, ce qui vient s'interposer entre les deux marges empêche leur fusion.
Modifié par Stephan (06 Jan 2006 - 14:12)
Sujet clos
Aller à