I margini verticali scompaiono quando l'elemento principale è impostato su overflow: visibile

Question

Perché i margini verticali scompaiono quando l'elemento principale è impostato su overflow: visibile? Se è impostato su overflow: i margini nascosti sono nuovamente visibili. Sembra controintuitivo.

Penso di capire come si suppone che l'overflow funzioni quando il contenuto di un elemento non si adatta a esso, ma non capisco cosa sta succedendo con i margini.

Ecco un esempio: (http://jsfiddle.net/VrVc7/)

#outer { 
    background-color:#EEE; 
    overflow:hidden; 
} 

#inner { 
    margin: 30px; 
    padding: 5px; 
    background-color:#ABE; 
} 

<div id="outer"> 
    <div id="inner">abc</div> 
</div> 

Answer 1

E 'a causa di margini di collasso:

Se si dispone di overflow: hidden, i margini del div interno rimangono all'interno del div esterno.
Se si ha overflow: visibile, i margini superiore e inferiore collpase con i margini zero del div esterno, perché si toccano. Questo viene quindi ricalcolato per avere lo stesso come il margine interno.

Quindi, overflow: nascosto interromperà i margini collassanti con quelli all'interno. Potresti rompere il margine collassando dando al div esterno un padding o un border. Così non toccheranno l'altro e quindi non crollare

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

Answer 2

So che questo è ciò che sembra. Ma quello che sta realmente accadendo qui si chiama collasso dei margini. La maggior parte delle volte se il genitore ha un margine, o se due fratelli hanno un margine allora il sovrappeso. Immaginate di avere un div con tre figli:

|--| 
|[]| 
|[]| 
|[]| 
|--| 

Se si mette un margine di 10 sui bambini. Ci sarà un totale di 10 spaziature verticali tra ciascun bambino, anche se ci si aspetterebbe che ci sia 20. Ciò è dovuto al fatto che se i margini sono condivisi, collassano l'uno nell'altro.

In entrambi i casi google, che lo spiegherò meglio di quanto io possa mai.

Answer 3

Si chiama collapsing margin. Come per W3c

In CSS, i margini adiacenti di due o più scatole (che potrebbe o potrebbe non essere fratelli) possono combinarsi per formare un unico margine. Margini che si combinano in questo modo si dice che collassano, e il margine combinato risultante viene chiamato un margine collassato.

Come prevenire da collapsing margin.

1. Margini tra una scatola galla e qualsiasi altra casella non collassano (non neanche tra un float ed i suoi figli in-flow).
2. Margini di elementi che stabiliscono nuovi contesti di formattazione di blocchi (come float ed elementi con "overflow" diversi da "visible") non collassare con i relativi figli di flusso.
3. I margini delle caselle posizionate in modo assoluto non collassano (nemmeno con i relativi bambini in ingresso).
4. I margini delle caselle di blocco in linea non vengono compressi (nemmeno con i relativi bambini in entrata ).
5. Il margine inferiore di un elemento a livello di blocco in entrata comprime sempre con il margine superiore del successivo fratello di flusso a livello di flusso, a meno che in cui il fratello ha spazio.
6. Il margine superiore di un elemento di blocco a flusso crolla con margine superiore suo primo in flusso bambino a livello di blocco se l'elemento non ha all'inizio confine, senza imbottitura superiore, e il bambino ha senza gioco.
7. Il margine inferiore di un contenitore di blocco nel flusso con un 'altezza' di 'auto' e 'min-height' di zero collassi con l'ultima margine inferiore a flusso livello di blocco del bambino se la scatola ha nessuna spaziatura interna e nessun bordo inferiore e il margine inferiore del bambino non crolla con un margine superiore che ha spazio.
8. di una casella di propria margini collasso se la proprietà 'min-height' è pari a zero, ed ha confini né superiore o inferiore, né padding superiore o inferiore, e ha un 'altezza' di 0 o 'auto', e non contiene un riquadrato di riga e tutti i margini (in caso) di eventuali margini per bambini in entrata collassano.