title: Remove extra button spacing/padding in Firefox
body: <p>See this code example: <a href="http://jsfiddle.net/Z2BMK/">http://jsfiddle.net/Z2BMK/</a></p>
  
  <p>Chrome/IE8 look like this</p>
  
  <p><img src="https://i.stack.imgur.com/YGebP.png" alt="enter image description here"></p>
  
  <p>Firefox looks like this</p>
  
  <p><img src="https://i.stack.imgur.com/Skbmp.png" alt="enter image description here"></p>
  
  <p>My CSS is </p>
  
  <pre><code>button {
      padding:0;
      background:#080;
      color:white;
      border:solid 2px;
      border-color: #0c0 #030 #030 #0c0;
      margin:0;
  }
  </code></pre>
  
  <p>How can I change the code sample to make the button the same in both browsers? I do not want to use JavaScript based hyperlinks because they do not work with space bar on keyboard and it has to have an <code>href</code> URL which is not a clean way to handle things.</p>
  
  <h2>My solution, since Firefox 13</h2>
  
  <p><code>button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }</code></p>