内联块元素高度问题

Question

我有一个简单的例子,其中一个外DIV包含内部DIV具有
display: inline-block;.
因为我已经设置了内部div的高度,所以我希望外部div与内部div具有相同的高度.相反,外部div略高,正如你可以从小提琴中看到的那样.问题:为什么会发生这种情况？如何在不明确设置高度的情况下"填充"外部div？
我的目标是根据内部的高度使外部div扩展和缩小.

.outer {
  background-color: red;
}
.inner {
  display: inline-block;
  width: 480px;
  height: 140px;
  background-color: green;
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 1

你的.innerdiv有display: inline-block.这意味着它需要围绕它的内联格式化上下文.内联布局产生支柱,为下降器提供空间.如果你在.inner元素旁边添加一个字符,你可以看到它是如何适合的:http://jsfiddle.net/bs14zzeb/6/

默认设置vertical-align是使inline-block框的下边缘与周围文本的基线对齐.即使没有周围文本,布局引擎仍然需要为整行文本腾出空间.

这就是为什么这些答案暗示你玩vertical-align房产.vertical-align: top正如一个答案所示,将其设置为告诉布局引擎将inline-block框的上边缘与线框的上边缘对齐.在这里,由于线高小于140px高,它摆脱了底部的额外空间.但如果一条线的高度比那条高,你下面还会有额外的空间:http://jsfiddle.net/bs14zzeb/9/

Answer 2

使用内联块时不要忘记设置vertical-align属性^MDN

.outer {
    background-color: red;
}
.inner {
    display: inline-block;
    vertical-align: top;     /* tada!!!! */
    width: 480px;
    height: 140px;
    background-color: green;
}

<div class="outer">
    <div class="inner"></div>
</div>