title: Phantom pixels on parent container in css
body: <p>If you inspect the icon height it's 16px, but for some reason the parent container is 18px.</p>
  
  <p>I've been playing with the css trying to figure why this happens, no luck. Probably something stupid.</p>
  
  <p>PD: No hacks... I know I can force the height on the container, but I don't want to. I just want to understand what's generating the extra pixels.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    background-color: green;
  }
  i {
    background-color: pink;
    display:inline-block;
    margin:0;
    padding:0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"&gt;
  
  &lt;div class="container"&gt;
    &lt;i class="fas fa-angry"&gt;&lt;/i&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have also checked this question: <a href="https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image">Image inside div has extra space below the image</a> but it doesn't seems to fix the issue when adjusting <code>vertical-align</code> (the <code>display:block</code> fixes the issue but I don't want to make the icon a block element since it need to go with text)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    background-color: green;
  }
  i {
    background-color: pink;
    display:inline-block;
    margin:0;
    padding:0;
    vertical-align:top;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"&gt;
  
  &lt;div class="container"&gt;
    &lt;i class="fas fa-angry"&gt;&lt;/i&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>