Perché overflow x: nascosto causa uno spazio extra sotto?

Question

Ho due spanne l'una dentro l'altra. Nell'intervallo interno ho overflow-x:hidden. Ciò provoca uno spazio aggiuntivo al di sotto dell'intervallo interno. Perché?

<span style="" class="yavbc-color-tip"><span style="">Some text</span></span> 

Fiddle: http://jsfiddle.net/U92ue/

Nota: Ho testato solo in ultima Chrome.

Answer 1

Visual formatting model - 9.4.1 Block formatting contexts

galleggianti, elementi posizionati in modo assoluto, i contenitori di blocchi (come linea blocchi, tovaglie, celle e tabella sottotitoli) che non sono bloccano scatole e scatole di blocco con 'troppopieno 'diverso da' visible ' (tranne quando tale valore è stato propagato al viewport) stabilisce nuovi contesti di formattazione dei blocchi per il loro contenuto.

In particolare, viene stabilito un nuovo contesto di formattazione dei blocchi quando viene modificata la proprietà di overflow. Per impostazione predefinita, il valore di una proprietà di vertical-align di un elemento è baseline. Puoi semplicemente cambiarlo in qualcosa come top per risolvere questo problema.

Updated Example

span.yavbc-color-tip span { 
    display: inline-block; 
    padding: 3px; 
    border-radius: 8px; 
    border: none; 
    background-color:#005e8e; 
    color:#7cd3ff; 
    overflow-x: hidden; /* This gives extra space under this span. Why? */ 
    vertical-align:top; 
} 

Avviso questo non accade quando il display del elemento non è cambiato in inline-block? Non si verifica con gli elementi inline - example dimostrando ciò.