Perché gli input di testo hanno un riempimento extra?

Question

Sto tentando di sovrapporre il testo su un <input type="text"> (per il supporto cross-browser placeholder). Ho scoperto che il mio posizionamento è sempre disattivato di un paio di pixel, a causa di una sorta di padding che non può essere rimosso impostando padding: 0;. I suggerimenti here e here non risolvono il problema.

Si può vedere questo imbottitura nel seguente screenshot da Chrome, come lo spazio bianco tra il momento clou blu e il bordo giallo:

Come posso a) rimuovere questo spazio; o b) misurarlo usando Javascript?

Answer 1

Se si sostituiscono i confini di default con il proprio, l'imbottitura va via (almeno per me, su Chrome/Mac):

Questo è il CSS che ho usato:

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

http://jsfiddle.net/NZZ5B/

Answer 2

È necessario ripristinare tutto. Quindi è meglio raccomandare di utilizzare:

<style> 
html, body { 

    margin: 0; 
    padding: 0; 

} 
</style> 

Spero che questo ha aiutato.