title: Why does margin:0 not work on buttons?
body: <p>I want two buttons to be displayed right next to each other, with no border in between. The buttons are:</p>
  
  <pre><code>&lt;button class="tButton"&gt;1&lt;/button&gt; 
  &lt;button class="tButton"&gt;2&lt;/button&gt; 
  </code></pre>
  
  <p>My naive approach for the css is:</p>
  
  <pre><code>.tButton {
      width: 50px;
      height: 50px;
      margin:0px;
      padding: 0px;
      background-color: gray;
      border: none;
  }
  </code></pre>
  
  <p>But this leaves some space between the buttons (<a href="http://jsfiddle.net/83a2Lou0/" rel="nofollow noreferrer">JSFiddle</a>). In Firefox, the example renders as:</p>
  
  <p><img src="https://i.stack.imgur.com/TygMC.png" alt="Around 5px between buttons"></p>
  
  <p>This problem goes away when I use <code>float: left;</code> on the buttons. But I am trying to understand the following about CSS: </p>
  
  <p>Why is there any margin to begin with, even though I explicitly set <code>margin: 0;</code>?</p>