How to remove the space below an empty divline div block (and why is it anyway?)

Question

I have the following problem: I am creating an inline-block (.content) element inside wrapper-div (.wrapper). If there is content in the .content-div, everything works fine. But if I remove the contents from the .content-div, the space will be added below the inline-block-div line.

I am not sure why this is happening and how to fix it correctly. Please note that after manually removing all spaces and line breaks in my code, the problem remains, but setting the font size to 0 helps.

Also setting vertical alignment: the top of the .content-div helps. I don’t know exactly why.

What is the best way to fix it? Why is this happening?

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

Update

. . ?

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 to top :

CSS inline table-cell.

Answer 3

: jsfiddle

, div : 0. : answer

. -, .

.

, . , , .

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

}