显示上方的空白：inline-block divs [重复]答案

【问题标题】：White space above display:inline-block divs [duplicate]显示上方的空白：inline-block divs [重复]
【发布时间】：2014-01-29 11:31:36
【问题描述】：

我正在开发一个网站，但我很难理解为什么会发生这种情况：

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>

这是由 google chrome 计算的 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 垂直对齐到顶部而不是默认的底部。

【问题讨论】：

标签： html whitespace css

【解决方案1】：

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

working demo

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

【讨论】：

我刚刚也注意到了这一点！ Col1 显然以 valign:bot 为默认值。谢谢！
@BjørnZeiler ：欢迎......介意将答案标记为接受或赞成？？？ :)
我很乐意，但我还需要 2 个代表才能做到这一点:( 所以如果你愿意，你应该支持我的问题：3
@BjørnZeiler ：我猜你已经投票了....标记接受关闭答案！ :)

【解决方案2】：

定义您的父级 font-size:0; 和子级定义 font-size:12px; 依赖于您的设计

习惯了

      div#content {
               font-size:0;
        }

        div#col1 {
    display: inline-block;
vertical-align:top;
            font-size:12px;
        }

        div#col2 {
    display: inline-block;
vertical-align:top;
                font-size:12px;
        }

现场演示 http://jsfiddle.net/jjY64/2/

【讨论】：

不修复它。检查上面 NoobEditor 的答案！