title: Persistent margin and 1px height difference around input elements
body: <p>I'm having a problem with input elements:</p>
  
  <p><img src="https://i.stack.imgur.com/2pIcN.png" alt="problematic input elements"></p>
  
  <p>Even though in that picture their css is</p>
  
  <pre><code>margin: 0;
  padding: 0;
  </code></pre>
  
  <p>They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.</p>
  
  <p>Also, when doing further styling I end up with a problem between Firefox and Chrome:
  submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.</p>
  
  <p><a href="http://gabrielecirulli.com/p/20110702-170721.png">1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png</a></p>
  
  <p>In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.</p>
  
  <p>Is there a solution to these 2 problems (the persistent margin and the 1px difference)?</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
  The second problem persists, though, as you can see here:
  by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
  <img src="https://i.stack.imgur.com/nknwV.png" alt="There&#39;s still a difference between the two elements"></p>