margin-top dans un div imbriqué

J'obtiens la solution avec overflow: auto dans la div parente.

Voici comment fonctionnent les marges.. la marge est l'espace entre l'élément suivant avec une marge / remplissage / similaire. Il n'est pas nécessairement défini comme son élément parent. consultez la spécification .

Voici quelques choses que vous pouvez faire comme solution de contournement

Utilisez Le Remplissage À La Place

Cela signifie simplement qu'au lieu d'utiliser margin-top: 10px; vous utilisez padding-top: 10px;. Ce n'est pas adapté pour chaque occasion.

Bizarre Hack J'Ai Découvert

Je doute que j'ai découvert cela au départ, mais le autre jour, j'ai résolu le problème comme ça. J'avais un <div id="header" /> que je voulais aussi donner une marge supérieure, et sa marge supérieure poussait aussi l'élément parent (body) vers le bas. J'ai donc fait cela sur l'élément body...

body {
    padding-top: 1px;
    margin-top: -1px;
}

Cela a fait fonctionner ma marge. Vous pouvez également essayer d'utiliser une bordure, comme border: 1px solid #ccc.

Il serait également sage de laisser une note dans les commentaires CSS pour expliquer pourquoi vous avez cette paire de règles particulière. Je viens d'ajouter /* this is to stop collapsing margins */.

Autres Lectures

Regarde ça autres questions sur un Débordement de Pile

La raison pour laquelle overflow: auto change le div parent pour autoriser le margin-top imbriqué est que crée un nouveau contexte de formatage. Tout div positionné absolu, fixe, flottant ou avec un débordement autre que visible crée un nouveau contexte de formatage. le div parent devient alors la racine de ce nouveau contexte de formatage, et la réduction des marges ne s'applique pas aux éléments racine.

Plus en profondeur:

Les contextes de formatage peuvent être en ligne ou en bloc, et seul le les contextes de formatage réduisent leurs marges. Ces contextes de formatage forment le flux du document.

Un contexte de formatage de bloc est simplement tous les éléments de niveau de bloc (par exemple divs, p, table) disposés l'un après l'autre verticalement dans un bloc contenant jusqu'à la fin du document/conteneur ou jusqu'à ce qu'un nouveau contexte de formatage soit établi.

Dans le cas de l'imbrication, le margin-top de l'enfant s'effondre avec le margin-top du parent puisque les deux divs font partie d'un bloc le formatage de contexte. En définissant overflow sur auto, le div parent devient le conteneur du nouveau contexte de formatage et l'enfant le premier élément de bloc qu'il contient. Ainsi, les deux marges ne sont plus "adjacentes" puisque le div parent est maintenant la racine.

J'espère que ça aide.

Modèle de boîte: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Modèle de formatage visuel: http://www.w3.org/TR/CSS2/visuren.html#normal-flow

"réduire les marges" est votre problème. Ici, vous pouvez comprendre ce qui est et pourquoi il est encore vivant: http://www.sitepoint.com/web-foundations/collapsing-margins/

J'ai lu à travers le web pour chercher une solution décente, et finalement j'ai trouvé cet article: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

En bref, vous avez un tas de méthodes pour résoudre votre problème:

1) frontière dans parent div (pourrait être transparent)

2) remplissage dans parent div

3) débordement: auto

4) float: left

Vous devez suivre le lien car il explique en détail toutes les solutions.

Vous pouvez également utiliser la propriété position pour inner div pour résoudre ce problème. comme:

position:fixed;