如何刪除空行內塊空格下的空間（爲什麼它有嗎？）

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; 

}