如何删除空行内块空格下的空间（为什么它有吗？）

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

设置你的内容显示，以阻止代替inline-block的解决了这个问题。

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

这就解释了为什么设置垂直对齐顶部修复问题，以及：

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

Answer 3

这里是一个工作示例：jsfiddle

要删除的差距，你必须围绕与字体大小的包装内容的div：0。 原因是这里exained：answer

内联块

此值使一个元件，以产生一个行内块的容器。内联块的内部被格式化为块框，并且该元素本身被格式化为原子内联级别框。

直列

此值使以产生一个或多个内联框的元件。

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

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

}