Larghezza di input type = elemento di testo

Question

Come mai quando faccio questo:

<input type="text" style="width: 10px; padding: 2px"/> 
<div style="width: 10px; border: solid 1px black; padding: 2px">&nbsp;</div> 

l'ingresso finisce 2 px più largo del div sia in IE6 e FF3? Cosa mi manca?

MODIFICA: Come molti hanno già detto, il confine è il problema. Se imposto il bordo: 0px sull'input, avrà la stessa larghezza del div con un bordo 0 px (verificato avvolgendolo all'interno di uno SPAN bordato).

Tuttavia, quando misuro gli elementi in pittura, il div ha un interno di 14 px, proprio come previsto (10 + 2 + 2). L'input, tuttavia, ha un interno di 16 px e quindi un bordo al di fuori di quello. Perchè è questo? Probabilmente non è un bug poiché accade sia in IE6 che in FF3, ma non lo capisco.

Answer 1

Credo che sia proprio il modo in cui il browser rende il loro input standard. Se si imposta un bordo sull'ingresso:

<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/> 
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div> 

Quindi entrambi hanno la stessa larghezza, almeno in FF.

Answer 2

Il visibile larghezza di un elemento è width + padding + border + outline, così sembra che si sta dimenticando il confine sul elemento di input. Vale a dire che la larghezza predefinita del bordo per un elemento di input sulla maggior parte dei browser (alcuni?) È effettivamente calcolata come 2px, non uno. Quindi il tuo input appare come 2px più ampio. Prova a impostare in modo esplicito lo border-width sull'input o allargando il div.

Answer 3

larghezza di ingresso è di 10 + 2 volte 1 px per il bordo

Answer 4

Penso che si sta dimenticando il confine. Avere un bordo di un pixel di larghezza sul Div sarà portare via due pixel di lunghezza totale. Pertanto apparirà come se il div sia due pixel più corto di quello che è in realtà.