Elementi figlio con margini all'interno dei DIV

Question

Ho bisogno di due consecutivi div s (con sfondi) da toccare senza problemi, uno sotto l'altro. Tuttavia, questo layout si interrompe quando inserisco un elemento figlio p nella parte inferiore div. I margini dell'elemento p impongono uno spazio vuoto tra i due div s. Questo è uno strano comportamento, poiché mi aspetto che il margine dello p rimanga all'interno dell'area di contenuto e di sfondo dello div. Rende allo stesso modo su Firefox, Chrome e IE 8.

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

Ecco come si presenta.

ho potuto risolvere questo cambiando i margini per imbottiture per l'elemento p, ma poi vorrei anche avere a che fare questo con elementi di intestazione, elementi della lista, e ogni altro elemento che voglio utilizzare al inizio di un div. Questo non è desiderabile.

Qualcuno potrebbe illuminarmi: quale caveat del modello di box mi manca? C'è un modo semplice per risolvere questo problema, preferibilmente modificando lo stile di div?

Answer 1

Questo è il expected behavior *. Ci sono alcuni modi per aggirarlo. Se si fanno fluttuare i div, questi conterranno i margini degli elementi figlio e impediranno il collasso dei margini. Un altro approccio consiste nell'aggiungere un bordo o riempimento ai div.

* I margini di div e p "si combinano per formare un margine singolo", anche se sono nidificati, perché hanno margini adiacenti senza riempimento o bordo tra di essi.

Answer 2

Aggiungi overflow: hidden o overflow: auto al div

Answer 3

Impostazione di un'imbottitura positiva, e un corrispondente margine negativo sull'elemento div sembra risolvere il problema, anche se non so perché.

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

Answer 4

Soluzione 1

Add overflow: hidden/auto al div contenente per evitare che il margine di collasso.

Soluzione 2

Aggiungere imbottitura positivo al div contenente e margine negativo uguale all'elemento interno

nuova soluzione

Aggiungere imbottitura 0.01px al div contenente, questo impedirà il collasso del margine ma non avrà bisogno di alcun margine negativo sull'elemento interno.