[Solved] display block child content causes vertical alignment issue

[spinningtape]

I’m seeing an unexpected margin issue when setting up inline-block div elements with content in them. The behavior is that if there is no content in a div, there is no margin, but as you add text the div acts as though it has a top margin. And that margin varies depending on how much content is in the div. Example here:

http://jsfiddle.net/a9j0rcau/4/

Why does this happen? And how can I make the divs in the second row line up as they do in the first?

[spinningtape]

Got it – just needed to set vertical-align to top on the inline-block divs.

[Author]

Posts