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

要删除间隙，您必须使用font-size：0的包装器包围内容div。原因如下：answer

<强>内联块

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

<强>内联

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

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

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

}

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

3 个答案: