Warum verursacht x-overflow: versteckt unten zusätzlichen Speicherplatz?

Question

Ich habe zwei Spannen ineinander. Auf der inneren Spannweite habe ich overflow-x:hidden. Dies verursacht zusätzlichen Raum unterhalb der inneren Spannweite. Warum?

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

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

Hinweis: Ich habe nur in neueste Chrome getestet haben.

Answer 1

Visual formatting model - 9.4.1 Block formatting contexts

Floats, absolut positionierten Elemente, Block Behälter (wie inline-Blöcke, tabellen Zellen und tabellen Bildunterschriften), die nicht-Boxen blockiert ist, und Block-Boxen mit ‚Überlauf 'anders als' sichtbar ' (außer wenn dieser Wert in das Ansichtsfenster übernommen wurde), legen Sie neue Blockformatierungskontexte für deren Inhalt fest.

Genauer gesagt wird ein neuer Blockformatierungskontext erstellt, wenn die Überlaufeigenschaft geändert wird. Standardmäßig ist der Eigenschaftswert vertical-align eines Elements baseline. Sie können dies einfach in etwas wie top ändern, um dies zu beheben.

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; 
} 

Hinweis Geschieht dies nicht, wenn die Anzeige des Elements inline-block nicht geändert wird? Es tritt nicht mit inline Elementen auf - example das zeigt dies.