内联块元素高度问题

Question

我有一个简单的示例，其中外DIV包含内部DIV，其中有 display: inline-block;。
 因为我已经设置了内部div的高度，所以我希望外部div与内部div具有相同的高度。相反，外部div略高，正如你可以从小提琴中看到的那样。问题：为什么会发生这种情况，我怎样才能填满＆＃34;外部div没有明确设置其高度？
我的目标是让外部div根据内部的高度进行扩展和缩小。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的.inner div有display: inline-block。这意味着它需要围绕它的内联格式化上下文。内联布局生成struts，为下降器腾出空间。如果在.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 property ^MDN

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

内联元素的默认垂直对齐方式是基线，因此您需要将其设置为顶部或中间：

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

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

Answer 4

这是因为您的#inner的显示属性设置为inline-block。要解决此问题，请将显示更改为block，或将vertical-align属性设置为top。

display: inline-block

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

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

vertical-align: 0

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

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

Answer 5

问题是display: inline-block;属性。请改为display: block;。

http://jsfiddle.net/bs14zzeb/7/

Answer 6

grep -f