css overflow hidden increases height of container

Question

Please have a look at this fiddle - http://jsfiddle.net/Z27hC/

var container = document.createElement(\'span\');
container.style.display = \'inline-block\';
cont         


        

Answer 1

The overflow-property can change the baseline of an element. To prevent this you can use vertical-align on inline-blocks.

cell.style.display = 'inline-block';
cell.style.overflow = 'hidden';
cell.style.verticalAlign = 'bottom';

http://jsfiddle.net/23e0rny9/

Answer 2

use the dsiplay 'block' of cell

cell.style.display = 'block';

and

cell.style.float= 'left';

to align left if you want to align

Answer 3

Try setting line-height: 0 for the container and line-height: 20pxfor your cells

container.style.lineHeight = '0px';

cell.style.lineHeight = '20px';

Fiddle

Or you can use float: left on your cells

cell.style.float = 'left';

Fiddle2

Answer 4

Let me explain to you why this is happening.

According to CSS 2.1 Specs,

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

To explain in simple words,

i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though). Then its baseline would be the baseline of the containing block of the line. ii) If inline-block in question has its overflow property set to OTHER THAN visible. Then its bottom margin would be on the baseline of the line of containing box.

So, in your case the inline-block cell has overflow:hidden (not VISIBLE), so its margin-bottom, the border of cell is at the baseline of the container element container.

That is why the element cell looks pushed upwards and the height of container appears increased. You can avoid that by setting cell to display:block.