行内块元素高度问题

Question

我有一个简单的示例，其中一个外部 DIV 包含一个具有 display: inline-block; 属性的内部 DIV。因为我设置了内部 div 的高度，所以我期望外部 div 与内部 div 具有相同的高度。但事实上，外部 div 稍微更高一些，您可以从 fiddle 中看到。问题：为什么会发生这种情况，如何在没有显式设置其高度的情况下“填充”外部 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>

- Lyn Headley

---

将 display:inline-block 从内部 div 移动到外部 div。 - BeNdErR

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/

- guest

---

相关信息和避免额外高度的建议：https://dev59.com/nWIj5IYBdhLWcg3wk182#20107222 - Martin Connell

Answer 2

使用inline-block时，请不要忘记设置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>

或者，可以使用CSS flex布局：

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

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

- Roko C. Buljan

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>

- j08691

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>

- Ian Hazzard

Answer 5

问题在于 display: inline-block; 属性。尝试使用 display: block; 代替。

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

- imtheman

Answer 6

.outer {
    line-height: 0px;
}

- cnmuc

Answer 7

.outer{font-size:0} 就可以完成任务了

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

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

- nik