margin-top dans une div imbriquée

Question

J'ai un problème avec le margin-top dans une div imbriquée -- lorsque j'applique margin-top à la div imbriquée, la marge est appliquée à la div parente au lieu de de la div imbriquée.

Des idées ?

Answer 1

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

Answer 2

Les marges s'effondreront de manière délibérée. Ajoutez 1px d'espacement et cela devrait fonctionner correctement.

Answer 3

C'est ainsi que fonctionnent les marges la marge est l'espace entre l'élément suivant avec une marge / un rembourrage / similaire. Elle n'est pas nécessairement définie comme l'élément parent. Consulter les spécifications .

Voici ce que vous pouvez faire pour contourner le problème

Utilisez plutôt le remplissage

Cela signifie simplement qu'au lieu d'utiliser margin-top: 10px; vous utilisez padding-top: 10px; . Il ne convient pas à toutes les occasions.

Une astuce bizarre que j'ai découverte

Je ne sais pas si j'ai découvert cela au départ, mais l'autre jour, j'ai résolu le problème de la manière suivante. J'avais un <div id="header" /> auquel je voulais donner une marge supérieure, et sa marge supérieure poussait le parent ( body ). C'est ce que j'ai fait pour l'élément body élément...

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

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

Il serait également judicieux de laisser une note dans les commentaires du CSS pour expliquer pourquoi vous avez cette paire de règles particulière. J'ai simplement ajouté /* this is to stop collapsing margins */ .

Pour en savoir plus

Consultez ces autres questions sur Stack Overflow

Answer 4

La raison pour laquelle overflow:auto modifie la div parente afin d'autoriser la marge supérieure imbriquée est que il crée un nouveau contexte de formatage. Toute div positionnée de manière absolue, fixe, flottante ou avec un débordement autre que visible crée un nouveau contexte de mise en forme. Le div parent devient alors la racine de ce nouveau contexte de mise en forme, et les marges de réduction ne s'appliquent pas aux éléments racine.

Plus en profondeur :

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

Un contexte de formatage de bloc est simplement constitué de tous les éléments de niveau 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 d'une imbrication, la marge supérieure de l'enfant s'effondre avec la marge supérieure du parent puisque les deux divs font partie d'un contexte de formatage en bloc. En réglant le débordement sur auto, la div parent devient le conteneur du nouveau contexte de mise en forme, et l'enfant le premier élément de bloc à l'intérieur de celui-ci. Ainsi, les deux marges ne sont plus "contiguës" puisque la division parentale est désormais la racine.

J'espère que cela vous aidera.

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

Answer 5

"L'effondrement des marges est votre problème. Ici, vous pourrez comprendre ce que c'est et pourquoi c'est toujours d'actualité : http://www.sitepoint.com/web-foundations/collapsing-margins/

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

En bref, vous disposez d'un grand nombre de méthodes pour résoudre votre problème :

1) bordure dans la div parentale (peut être transparente)

2) padding in parent div

3) débordement : automatique

4) float : left

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