显示屏上方的空白区域:内联块div

Question

我正在开发一个网站,我很难理解为什么地球上发生这种情况:

http://i.imgur.com/DABPnlM.png

这是我的内容div的html:

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

这是由谷歌浏览器(相关的CSS)计算的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;
 }

我注意到如果我删除段落中的一些文本,空间将增加/减少,如果我将div移动一点(通过改变它们的宽度),我移动空间.如果我让col1足够小,col2将有高于它的间距..

有任何想法吗？

编辑:jsfiddle也这样做:http://jsfiddle.net/jjY64/

解

正如NoobEditor指出的那样,我所要做的就是垂直对齐col1到顶部而不是默认底部.

Answer 1

添加vertical-align:top;到div#col1

工作演示

div#col1 {
 display: inline-block;
 width: 510px;
 border:1px solid red;
 vertical-align:top;
}