White space above display:inline-block divs

I'm developing a website and I'm having difficulties understanding why on earth this is happening: https://i.stack.imgur.com/hxArz.png Here is my html for the content div: ``` <div id="content" style="display: block;"> <div id="col1"> <h1>Prosperity Construtora E Incorporadora</h1> <p>[...] text [...]</p> <p>[...] text [...]</p> </div> <div id="col2"> <h1>Empregos na Prosperity</h1> <p>[...] text [...]</p> <h1>Fotos de trabalhos realizados</h1> <p>[...] text [...]</p> </div> ``` Here is the css that is computed by google chrome (the relevant css): ``` div#content { height: auto; margin: 15px auto 0 auto; width: 800px; text-align: left; padding-bottom: 23px; } div#col1 { display: inline-block; width: 510px; } div#col2 { display: inline-block; width: 260px; } ``` I've noticed that if I remove some of the text in the paragraphs, the space will increase / decrease and if I move the divs around a bit (by changing their width) I move the space. If I make col1 small enough, col2 will have the spacing above it.. Any ideas? EDIT: jsfiddle does this as well: http://jsfiddle.net/jjY64/ Solution As NoobEditor points out, all I had to do was vertical align col1 to top instead of the default bottom.