haut de la page dans un div imbriqué
J'ai un problème avec le margin-top dans un div imbriqué - lorsque j'applique margin-top au div imbriqué, la marge est appliquée au div parent à la place du div imbriqué .
Des idées?
Les marges s'effondreront par conception. Ajouter 1px de rembourrage aussi bien et cela devrait bien fonctionner.
Je reçois la solution avec débordement: auto dans la division parent.
Voici comment fonctionnent les marges. La marge est l'espace entre l'élément suivant avec une marge/un remplissage/similaire. Il n'est pas nécessairement défini comme son élément parent. Consultez la fiche technique .
Voici quelques solutions pour contourner le problème.
Utilisez plutôt un rembourrage
Cela signifie simplement qu'au lieu d'utiliser margin-top: 10px;, vous utilisez padding-top: 10px;. Ce n'est pas adapté à toutes les occasions.
Bizarre Hack j'ai découvert
Je doute d’avoir découvert cela au début, mais l’autre jour, j’ai résolu le problème de la sorte. J'ai eu un <div id="header" /> que je voulais aussi donner une marge supérieure, et sa marge supérieure poussait également l'élément parent (body). J'ai donc fait cela sur l'élément body ...
body {
padding-top: 1px;
margin-top: -1px;
}
Cela a fait ma marge de travail. Vous pouvez également essayer d'utiliser une bordure, telle que 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 */.
Lectures complémentaires
La raison du débordement: auto modifie le div parent pour autoriser le sommet de la marge imbriquée, c'est que il crée un nouveau contexte de mise en forme. Toute div positionnée en absolu, fixe, flottant 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 racines.
Plus en profondeur:
Les contextes de formatage peuvent être en ligne ou en bloc, et seuls les contextes de formatage de 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, tableau) disposés l'un après l'autre verticalement dans un bloc conteneur jusqu'à la fin du document/conteneur ou jusqu'à l'établissement d'un nouveau contexte de formatage.
Dans le cas d'une imbrication, le haut de la marge de l'enfant s'effondre avec le haut de la marge du parent, car les deux div font partie d'un contexte de formatage de bloc. En définissant overflow sur auto, la division parent devient le conteneur du nouveau contexte de mise en forme, et l'enfant le premier élément de bloc qu'il contient. Ainsi, les deux marges ne sont plus "contiguës" puisque le div parent est maintenant la racine.
J'espère que cela pourra aider.
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 toujours vivant: http://www.sitepoint.com/web-foundations/collapsing-margins/
J'ai parcouru le Web pour trouver 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) border dans parent div (pourrait être transparent)
2) rembourrage en parent div
3) débordement: auto
4) float: gauche
Vous devez suivre le lien car il explique en détail toutes les solutions.
Vous pouvez également utiliser la propriété position pour div interne pour résoudre ce problème. comme:
position:fixed;