如何删除空内联块 div 下方的空间（以及为什么它仍然存在？）

Question

我有以下问题：我在 wrapper-div (.wrapper) 中创建了一个内联块元素 (.content)。如果 .content-div 中有内容，则一切正常。但是，如果我从 .content-div 中删除内容，则会在 inline-block-div 下方添加一个空格。

我不确定为什么会发生这种情况以及如何正确修复它。请注意，在我的代码中手动删除所有空格和换行符后，问题仍然存在，但将 font-size 设置为 0 会有所帮助。

此外，将 vertical-align: top 设置为 .content-div 也有帮助。我不确定为什么。

修复它的最佳方法是什么？为什么会这样？

小提琴：https://jsfiddle.net/cjqvcvL3/1/

<p>Works fine:</p>

<div class="wrapper">
  <div class="content">not empty</div>
</div>

<p>Not so much:</p>

<div class="wrapper">
  <div class="content"></div>
</div>

.wrapper {
  background-color: red;
  margin-bottom: 20px;
 /* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}

.content {
  display: inline-block;
  height: 20px;
  width: 200px;
  background-color: green;
  /* vertical-align: top; *//* this would fix it, but why? */
}

更新

我已经组装了一个新的小提琴。这应该更好地说明我的问题。怎么去掉textarea下面的绿线？

https://jsfiddle.net/cjqvcvL3/7/

<div class="content"><textarea>Some&#13;&#10;Content</textarea></div>

.content {
  display: inline-block;
  background-color: green;
}

Answer 1

发生这种情况是因为您专门为 .content 指定了宽度和高度。 您是否考虑过使用:empty 伪选择器？

.content:empty {
  display: none;
}

https://jsfiddle.net/cjqvcvL3/5/

Answer 2

将内容显示设置为块而不是内联块可以解决问题。

.content {
  display: block;
  height: 20px;
  width: 200px;
  background-color: green;
  /* vertical-align: top; *//* this fixes it  */
}

这解释了为什么将 vertical-align 设置为 top 也可以解决问题：

vertical-align CSS 属性指定垂直对齐方式 内联或表格单元格框。

Answer 3

这是一个工作示例：jsfiddle

要消除间隙，您必须使用字体大小为 0 的包装器围绕内容 div。 原因在这里检查：answer

内联块

此值使元素生成内联级块容器。 inline-block 的内部被格式化为块框，元素本身被格式化为原子内联框。

内联

该值会导致元素生成一个或多个内联框。

这个主题最重要的部分是元素本身的格式不仅仅是内容。每个 inline-block 元素都将被视为原子内联框，因此会占用空间。

.wrapper2 {
 background-color: red;
  margin-bottom: 20px;
  font-size:0;

}