Why does x-overflow:hidden cause extra space below?
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>
Note: I have only tested in latest Chrome.
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.
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.