Why do text inputs have an extra addition?

Question

I am trying to overlay text on <input type="text"> (to support cross placeholder browser). I found that my positioning is always turned off by a couple of pixels due to some addition that cannot be removed by setting padding: 0; . The suggestions here and here do not solve the problem.

You can see this add-on in the following screenshot from Chrome, as a space between the blue and the yellow border:

How can I: a) remove this space; or b) measure it with Javascript?

Answer 1

If you replace the default borders with your own, the cancellation is deleted (at least for me, on Chrome / Mac):

This is the CSS I used:

 input { padding: 0; outline: none; border: 1px solid red; } 

http://jsfiddle.net/NZZ5B/

Answer 2

You need to reset everything. Therefore, it is recommended to use:

 <style> html, body { margin: 0; padding: 0; } </style> 

Hope this helps.