Lorsque j'ajoute une marge à une variable DIV imbriquée, la variable DIV reçoit la marge à la place, sauf si je donne une bordure à la variable DIV parent. Pourquoi?

Question

Est-ce que quelqu'un d'autre a déjà traversé ça? C'est la deuxième fois que cela se produit en autant d'années et je ne suis pas sûr de la façon «correcte» de le résoudre.

Je peux obtenir les mêmes résultats avec un rembourrage chez l'enfant, mais cela n'a aucun sens.

Test dans Safari/FF.

Answer 1

Je résout généralement ce problème en réglant display: inline-block sur div externe. Il va faire div diviser pour occuper exactement l'espace nécessaire pour afficher son contenu.

An example, montrant la différence.

Answer 2

Il est appelé margin-collapse. Lorsqu'une marge supérieure et inférieure est directement en contact (non séparée par quelque chose, comme une bordure ou un saut de ligne), les marges s'effondrent en une seule marge. Ce n'est pas un bug. En savoir plus à ce sujet ici au SitePoint.

Answer 3

Cela ressemble à l'effondrement de la marge qui est un comportement naturel. Ceci est une bonne lecture:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

Il y a plusieurs façons d'obtenir la marge autour des questions s'effondrer. Une façon est d'ajouter une bordure ou 1px de rembourrage autour des éléments de sorte que les bordures ne sont plus en contact et donc aucun plus longtemps s'effondrer. Une autre façon d'arrêter l'effondrement des marges consiste à modifier la propriété de position de l'élément . Les spécifications CSS2 expliquent que les marges des zones absolument et relativement positionnées ne s'affaissent pas. Aussi, si vous faites flotter une boîte, ses marges ne s'effondrent plus. Il n'est pas toujours approprié de changer les propriétés de position d'un élément, mais dans certaines situations, si vous rencontrez des problèmes avec l'effondrement de la marge non désirée, cela peut être une option.