Problème de margin

23 juil. 2010, 19:22

Bonjour,

Je suis confronté à un problème que je ne comprend pas.

Soit le fichier suivant :

<html>
<head>
<style type="text/css">
body {
	background:#DDDDDD;
}
.main {
	background:#666666;
}
.main-content {
	margin:30px 0 0 0;
	background:#FFFFFF;
}
</style>

</head>

<body>

<div class="main">
	
	main
	
	<div class="main-content">main-content</div>
			
</div>

</body>
</html>

Ici, aucun problème. J'ai un div, avec du texte, puis un autre div inclus dans le premier, qui reçoit une margin supérieure de 30px.

Maintenant, je supprimes juste le texte "main" :

<html>
<head>
<style type="text/css">
body {
	background:#DDDDDD;
}
.main {
	background:#666666;
}
.main-content {
	margin:30px 0 0 0;
	background:#FFFFFF;
}
</style>

</head>

<body>

<div class="main">
	
	<div class="main-content">main-content</div>
			
</div>

</body>
</html>

Et là, si on browse, la margin supérieure du bloc main-content ne s'opère pas vraiment sur ce bloc, mais sur le bloc parent. Pourquoi ? Comment faire pour avoir une margin supérieure de 30px sur le bloc enfant, sans mettre du texte avant ?

25 juil. 2010, 20:18

heuu ... tu peux donner un exemple en ligne ? par ce que c'est pas bien clair ton histoire

l'attribut css margin (ou ici marginTop) sert à l'aisser une marge entre l'élément auquel il est attribué et son parent !...

donc div#main-content aura une marge de 30x avec son parent div#main
tu peux avoir un résultat à peux prés équivalent (dans le cas présent) en attribuant à l'attribut paddingTop de div#main une valeur de 30px => (padding => marge intérieur, margin => marge extérieur à l'élément auquel ils sont attribué)

si tu veux que la marge soit appliquée à l'intérieur de div#main-content tu dois utiliser padding sur l'élément div#main-content ...

@+

30 juil. 2010, 13:11

Oui, voici 2 exemples, l'un fonctionnant comme attendu, l'autre non.

Celui qui fonctionne, basé sur le premier script HTML fourni dans mon premier message : http://wir3d.net/tests/margins_ok.html
Celui qui ne fonctionne pas, basé sur mon deuxième script HTML : http://wir3d.net/tests/margins_ko.html

Pourtant, la seule différence entre ces 2 fichiers est le fait qu'il y a un texte dans le div parent, avant le div enfant.

Et on voit bien que dans le 2e fichier, la margin-top ne s'applique pas correctement. Ou plutôt elle s'applique, mais sur le div parent, qui du coup se place a 30px du body.

13 juin 2011, 21:33

Le sujet est un peu vieux mais je met l'astuce quand même au cas ou quelqu'un galère encore avec ça.

Mettre un padding:1px sur le parent.

Ce problème est du à la fusion des marges.

14 juin 2011, 01:19

Euh, ça me semble un peu bricoleur ta solution. La fusion des marges extérieures hautes et basses c'est normal ...

Par contre, là où je me suis déjà fait avoir régulièrement, c'est en ne déclarant pas le Doctype. Si tu ne le déclares pas, sur IE par exemple, tu auras de sacré surprises.

Problème de margin

Qui est en ligne