Question

I have two divs inside a container, both of them set to display:inline-block with the same height. The only difference between the two are their font sizes. Because their heights are set to the same values, I’d expect them to be the same height and be from the very top of the page, however this isn’t the case (one is offset from the top by a little bit).

Why is this the case, and how do I make them both the same height and have 0 offset from the top?

http://jsfiddle.net/tinanyaa/tWrHd/1/

Answer 1

The default value of inline-block is baseline. Define vertical-align:top in your DIV. Write like this:

div{
 display:inline-block;
 vertical-align:top
}

Check this http://jsfiddle.net/tWrHd/2/

Read this for more Why is this inline-block element pushed downward?