section avec margin-bottom.

Version imprimable

Bonjour voici mon problème:
Je n'arrive pas à mettre un margin-bottom à ma première section:

Code:

1
2
<section id="conteneurPrincipal"></section>
<section id="conteneurResultat"></section>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#conteneurPrincipal {
	background-image: url("../img/fond.jpg");
	background-repeat: no-repeat;
	border: solid 7px white;
	clear: left;
	height: 360px;
	margin-bottom: 50px;
	margin: auto;
	width: 970px;
}
 
#conteneurResultat {
	border: solid 7px white;
	background-color: white;
	margin: auto;
	width: 970px;
}

Bonjour,

Essaye de déclarer ton margin-bottom seulement après ton margin : auto.
Ça devrais résoudre ton problème.

Par contre je ne saurais pas vraiment expliquer pourquoi c'est ainsi... :oops: Si quelqu'un à la réponse d'ailleurs je suis preneur. :ccool:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #conteneurPrincipal { background-image: url("../img/fond.jpg"); background-repeat: no-repeat; border: solid 7px white; clear: left; height: 360px; margin: auto; margin-bottom: 50px; width: 970px; } #conteneurResultat { border: solid 7px white; background-color: white; margin: auto; width: 970px; }

23/10/2013, 14h42
grimmjow jaggerjack

Merci le problème est résolu.
23/10/2013, 16h12
rodolphebrd
Pourquoi cette déclaration ne prend pas en compte le margin-bottom ?
Code:

1 2 margin-bottom: 50px; margin: auto;
alors que celle-ci oui :
Code:

1 2 margin: auto; margin-bottom: 50px;
Je dirais que la priorité est donnée, par le navigateur, à la dernière déclaration dans le cas d'une redondance de définition. Margin:auto prend donc dans le premier cas la priorité sur margin-bottom.

Cependant cette écriture (même si elle donne un résultat dans le 2ème cas) n'est pas bonne.
Il faudra privilégier celle-ci :
Code:

1 2 3 margin-right: auto; margin-left: auto; margin-bottom: 50px;
23/10/2013, 16h31
Candygirl

Code:

margin:0 auto 50px;

Pour la version réduite ;)
24/10/2013, 14h12
sk8matt

Merci pour la précision :ccool: