如何删除空内联块div下面的空格（为什么它仍然存在？）

I have the following problem: I am creating an inline-block element (.content) within a wrapper-div (.wrapper). If there is content in the .content-div, everything works just fine. But if I remove the content from the .content-div, a space gets added below the inline-block-div.

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

I am not sure why this happens and how to fix it correctly. Note that after manually removing all spaces and line-breaks in my code the problem persists, but setting the font-size to 0 helps.

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

Also, setting vertical-align: top to the .content-div helps. I am not sure why exactly.

另外，将vertical-align：top设置为.content-div会有所帮助。我不确定为什么。

Whats the best way of fixing it? Why does this happen?

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

Fiddle: https://jsfiddle.net/cjqvcvL3/1/

小提琴：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? */
}

Update

更新

I have put together a new fiddle. This should better illustrate my problem. How do I get rid of the green line below the textarea?

我把一个新的小提琴放在一起。这应该更好地说明我的问题。如何摆脱textarea下方的绿线？

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

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

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

3 个解决方案

#1

This happens because you specifically give width and height to the .content. Have you considered using the :empty pseudo selector?

发生这种情况是因为您特意为.content提供宽度和高度。您是否考虑过使用：empty伪选择器？

.content:empty {
  display: none;
}

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

#2

Setting your the content display to block instead of inline-block fixes the problem.

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

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

This explains why setting vertical-align to top fixes the problem as well:

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

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

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

#3

Here is a working example: jsfiddle

这是一个工作示例：jsfiddle

To remove the gap, you have to surround the content div with a wrapper with font-size:0. The reason is exained here: answer

要删除间隙，您必须使用font-size：0的包装器包围内容div。这里有理由：答案

inline-block

内联块

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

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

inline

一致

This value causes an element to generate one or more inline boxes.

此值使元素生成一个或多个内联框。

The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.

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

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

}

#1