html - 如何删除空内联 block div 下面的空间(为什么它仍然存在？)

Question

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

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

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

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

fiddle :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? */
}

更新

我已经组装了一个新的 fiddle 。这应该能更好地说明我的问题。如何去掉文本区域下方的绿线？

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/