title: Bootstrap anchor element and button with no space between
body: <p>I'm using Bootstrap 3 and I have a line of buttons. One of them is a <code>&lt;a&gt;</code> button, or: <code>&lt;a class='btn btn-default' role='button'&gt;Button here&lt;/a&gt;</code>; the rest are <code>&lt;button&gt;</code> elements with the same classes.</p>
  
  <p>I was expecting to have them all correctly aligned and spaced, as seen in <a href="http://getbootstrap.com/css/?#buttons-tags" rel="nofollow noreferrer">Bootstrap's examples</a>, however, the result was this:</p>
  
  <p><a href="https://i.stack.imgur.com/3kW6a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3kW6a.png" alt="No space between anchor and button"></a> </p>
  
  <p>As you can see, the first button, the one specified as <code>&lt;a&gt;</code> doesn't have the right margin with the next button. What can be causing this?</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;a class="btn btn-default" role="button"&gt;
     &lt;i class="fa fa-download" aria-hidden="true"&gt;&lt;/i&gt; Download Image
  &lt;/a&gt;
  &lt;button class="btn btn-default"&gt;
     &lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; Edit Title
  &lt;/button&gt;
  &lt;button class="btn btn-default"&gt;Export&lt;/button&gt;
  &lt;button class="btn btn-danger"&gt;Delete&lt;/button&gt;
  </code></pre>