How to remove space below empty inline-block div (and why is it there anyway?)

Question

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.

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.

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

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

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

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?

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

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

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

Answer 1

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

.content:empty {
  display: none;
}

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