[Résolu] Deux blocks liés alors qu'ils ne devraient pas

Bonjour à tous, j'ai besoin de vos lumières !

J'ai un header qui est composé d'un block qui me permet de centrer une image (je l'appelerai block_image) et un autre block qui englobe ce block (je l'appelerai block_ensemble). (Block = div)

Le block_ensemble a une image en arrière plan qui se répète horizontalement.

#header
{
	height: 230px;
	background-image: url("/project/images/headers/background_header.jpg");
	background-position: top left;
	margin: auto;
}

Le block_image doit lui juste être centré :

#logo_header
{
	width: 720px;
	height: 180px;
	margin: auto;
	border: solid 10px #3C060B;
}

Jusque là, pas de problèmes, je peux centrer mon image dans mon autre block. (1)

Par contre quand je veux décaler mon logo, je lui ajoute un margin-top de 1em et là ça devient le bordel, le block qui englobe tout le header se décale alors qu'il ne devrait pas... (2)

#logo_header
{
	width: 720px;
	height: 180px;
	margin: auto;
	border: solid 10px #3C060B;
}

Devient :

#logo_header
{
	width: 720px;
	height: 180px;
	margin: 1em auto;
	border: solid 10px #3C060B;
}

Illustration (1) :

screen_header_1.jpg

Illustration (2) :

screen_header_2.jpg

Avez-vous une idée de pourquoi tout le bloc se décale ?

D'avance, merci de votre aide !

EDIT de Julien Royer : merci d'éviter les images trop larges qui déforment le forum.
Modifié par Artusamak (03 Mar 2007 - 23:33)

Artusamak a écrit :
Par contre quand je veux décaler mon logo, je lui ajoute un margin-top de 1em et là ça devient le bordel, le block qui englobe tout le header se décale alors qu'il ne devrait pas...

Si si, il devrait. Ça s'appelle la fusion des marges et c'est non seulement normal, mais en plus c'est utile. Sauf dans ton cas où ça t'embête parce que tu ne l'avais pas vue venir.

Je n'avais pas vu ton lien, c'est résolu merci
Modifié par Artusamak (03 Mar 2007 - 23:33)