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:
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.