title: How to remove space below empty inline-block div (and why is it there anyway?)
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Also, setting vertical-align: top to the .content-div helps. I am not sure why exactly.</p>
  
  <p>Whats the best way of fixing it? Why does this happen?</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/cjqvcvL3/1/" rel="nofollow">https://jsfiddle.net/cjqvcvL3/1/</a></p>
  
  <pre><code>&lt;p&gt;Works fine:&lt;/p&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;div class="content"&gt;not empty&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Not so much:&lt;/p&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .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? */
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>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?</p>
  
  <p><a href="https://jsfiddle.net/cjqvcvL3/7/" rel="nofollow">https://jsfiddle.net/cjqvcvL3/7/</a></p>
  
  <pre><code>&lt;div class="content"&gt;&lt;textarea&gt;Some&amp;#13;&amp;#10;Content&lt;/textarea&gt;&lt;/div&gt;
  
  .content {
    display: inline-block;
    background-color: green;
  }
  </code></pre>