La marge sur l'élément enfant déplace l'élément parent

Question

J'ai un div (parent) qui contient un autre div (enfant). Le Parent est le premier élément en body aucun style CSS. Lorsque j'ai mis

.child
{
    margin-top: 10px;
}

Le résultat final est que le haut de mon enfant est toujours aligné avec les parents. À la place de l'enfant en train de passer pour 10px vers le bas, ma mère se déplace 10px vers le bas.

Mon DOCTYPE est définie à l' XHTML Transitional.

Ce qui me manque ici?

edit 1
Ma mère doit avoir strictement définies dimensions parce qu'il a un fond qui doit être affichée en dessous du haut vers le bas (pixel). Alors un réglage vertical des marges, c'est un no go.

edit 2
Ce comportement est le même sur FF, IE ainsi que les CR.

Answer 1

Trouvé une solution de rechange à l' Enfant des éléments avec des marges au sein de DIVs Vous pouvez également ajouter:

.parent { overflow: auto; }

ou:

.parent { overflow: hidden; }

Cela empêche les marges de l'effondrement. La frontière et le rembourrage en faire de même. Par conséquent, vous pouvez également utiliser celui-ci pour éviter un haut-marge de l'effondrement:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Answer 2

Il s’agit d’un comportement normal (entre les implémentations navigateur au moins). Marge n’affecte pas la position de l’enfant par rapport à son parent, à moins que le parent a un rembourrage, dans lequel cas la plupart des navigateurs ajouterez ensuite la marge de l’enfant au padding du parent.

Pour obtenir le comportement souhaité, vous devez :

Answer 3

l’élément parent ne doit ne pas être vide au moins mettre `` avant l’élément enfant.

Answer 4

J’ai eu ce problème aussi, mais a préféré éviter les hacks de marges négatives, alors j’ai mis un

``

autour d’elle tout ce qui ayant rembourrages au lieu de marges. Bien sûr cela signifie divitis plus mais c’est probablement la façon la plus propre pour y parvenir correctement.

Answer 5

La des éléments contenus dans s’effondrent.

Dans cet exemple, reçoit un des styles navigateur par défaut. Valeur par défaut du navigateur est typiquement 16px. Par la présence d’un de plus de 16px sur `` vous commencez à remarquer sa position à déplacer.