html - Why does x-overflow:hidden cause extra space below?

Question

I have two spans inside each other. On the inner span I have overflow-x:hidden. This causes extra space below the inner span. Why?

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

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

Note: I have only tested in latest Chrome.

Answer 1

Visual formatting model - 9.4.1 Block formatting contexts

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

More specifically, a new block formatting context is established when the overflow property is changed. By default, an element's vertical-align property value is baseline. You can simply change this to something like top in order to fix this.

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

Notice this doesn't happen when the element's display isn't changed to inline-block? It doesn't occur with inline elements - example demonstrating this.