Eléments enfants avec des marges dans les DIV

Question

J'ai besoin de deux div s consécutifs (avec arrière-plans) pour être en contact de manière transparente, l'un en dessous de l'autre. Cependant, cette disposition se brise lorsque je mets un élément enfant p dans le bas div. Les marges de l'élément p forcent un vide entre les deux div s. C'est un comportement étrange, car je m'attends à ce que la marge du p reste dans la zone de contenu et d'arrière-plan du div. Il rend la même chose sur Firefox, Chrome et IE 8.

<div style="background: #ccccff">Top Div</div> 
<div style="background: #ffcccc"><p>Bottom Div</p></div> 

Voici à quoi il ressemble.

Je pouvais corriger cela en changeant les marges rembourrages pour l'élément p, mais je dois aussi le faire avec des éléments d'en-tête, des éléments de la liste, et tout autre élément que je veux utiliser au début d'un div. Ce n'est pas souhaitable.

Quelqu'un pourrait m'éclairer: quel est le problème du modèle de boîte qui me manque? Est-il un moyen facile de résoudre ce problème, de préférence en modifiant le style de la div?

Answer 1

C'est le expected behavior *. Il y a plusieurs façons de contourner le problème. Si vous faites flotter les divs, ils contiendront les marges des éléments enfants et empêcheront l'effondrement de la marge. Une autre approche consiste à ajouter une bordure ou un remplissage aux divs. * Les marges du div et du p "se combinent pour former une seule marge", même si elles sont imbriquées, parce qu'elles ont des marges adjacentes sans marge ni marge entre elles.

Answer 2

Ajouter overflow: hidden ou overflow: auto à la div

Answer 3

Définition d'un rembourrage positif et une marge négative correspondante sur l'élément div semble résoudre le problème, mais je sais pas pourquoi.

<div style="background: #ccccff">Top Div</div> 
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div> 

Answer 4

Solution 1

Ajouter overflow: hidden/auto à la div contenant pour empêcher la marge effondrement.

Solution 2

Ajouter rembourrage positive à la div contenant et égale marge négative de l'élément intérieur

nouvelle solution

Ajouter rembourrage de 0.01px à la div contenant, ce empêchera l'effondrement de la marge mais n'aura pas besoin de marge négative sur l'élément interne.