There is a css bug I encountered today which I want to share with you guy in case it happened to you one day.

When you have html structure like this: 

<div class=”parent”>

    <div class=”child”>




and you set child overflow: hidden and display: inline-block. You will find parent’s height is a little bit bigger than child’s. 


The way to fix this is simple.Just apply vertical-align: top to child and it will display as expect like case 4 in the demo.


Actually this is not a bug, I called it a bug just because it’s not most of us will expected. the css spec said that:

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.

So the reason is obvious now. Since we set overflow: hidden to child which makes the baseline of child being the bottom margin edge and expand parent.