title: CSS overflow:hidden creating margin at bottom
body: <p>When I add </p>
  
  <pre><code>overflow:hidden
  </code></pre>
  
  <p>to any of the buttons on my page, it creates 13px of margin at the bottom of the button. When I remove the above CSS, the margin disappears, however some content inside the button overflows.</p>
  
  <p>How can I remove the margin at the bottom, while keeping the</p>
  
  <pre><code>overflow:hidden
  </code></pre>
  
  <p>CSS style?</p>
  
  <p>WITH <code>overflow:hidden</code>
  <a href="https://i.stack.imgur.com/MAs37.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MAs37.png" alt="hidden"></a></p>
  
  <p>WITHOUT <code>overflow:hidden</code>
  <a href="https://i.stack.imgur.com/O4H3B.png" rel="noreferrer"><img src="https://i.stack.imgur.com/O4H3B.png" alt="without"></a></p>
  
  <p>, however, the Facebook logo overflows into the next button (it is a custom font)</p>
  
  <p>CURRENT BUTTON CSS:</p>
  
  <pre><code>.btn {
      background-color: #FF6347;
      border: 1px solid #CC4F39;
      color: #FFFFFF;
      text-decoration: none;
      padding: 7px 15px;
      cursor: pointer;
      font-size: 1em;
      text-shadow: 0 1px 2px #000000;
      display: inline-block;
      overflow: hidden;
  }
  </code></pre>
  
  <p>CURRENT BUTTON HTML:</p>
  
  <pre><code>&lt;a class="btn btn-fb btn-xl" id="login_fb"&gt;&lt;span class="icon-socialfacebookvariant"&gt;&lt;/span&gt;Log In&lt;/a&gt;
  </code></pre>
  
  <p>CURRENT FACEBOOK LOGO CSS:</p>
  
  <pre><code>[class^="icon-"], [class*=" icon-"] {
      overflow:hidden;
  }
  
  [class^="icon-"]:before, [class*=" icon-"]:before {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size:2em;
      line-height:0;
      font-family: 'icomoon';
      position:relative;
      top:-1px;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      vertical-align:middle;
  }
  
  // Facebook logo from a font
  .icon-socialfacebookvariant:before {
      content: "\e9e3";
  }
  </code></pre>