Ancho de input type = elemento de texto

Question

¿Cómo es que cuando hago esto:

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

la entrada termina por 2 píxeles más ancha que la div tanto en IE6 y FF3? ¿Qué me estoy perdiendo?

EDITAR: Como mucha gente ha dicho, el límite es el problema. Si configuro border: 0px en la entrada, tendrá el mismo ancho que el div con un borde de 0 px (verificado al envolverlo dentro de un SPAN delimitado).

Sin embargo, cuando mido los elementos en la pintura, el div tiene un interior de 14 px, tal como se esperaba (10 + 2 + 2). La entrada, sin embargo, tiene un interior de 16 px, y luego un borde fuera de eso. ¿Por qué es esto? Probablemente no sea un error, ya que ocurre en IE6 y FF3, pero no lo entiendo.

Answer 1

Creo que así es como el navegador representa su entrada estándar. Si establece un borde en la entrada:

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

Ambos tienen el mismo ancho, al menos en FF.

Answer 2

La visible ancho de un elemento es width + padding + border + outline, por lo que parece que se está olvidando el borde en el elemento de entrada. Es decir, que el ancho del borde predeterminado para un elemento de entrada en la mayoría de los navegadores (algunos?) Se calcula realmente como 2px, no como uno. Por lo tanto, su entrada aparece como 2px más ancha. Intente configurar explícitamente el border-width en la entrada o amplíe su div.

Answer 3

ancho de la entrada es de 10 + 2 veces 1 px para la frontera

Answer 4

Creo que se está olvidando de la frontera. Tener un borde de un píxel de ancho en la Div va a quitar dos píxeles de longitud total. Por lo tanto, parecerá que el div es dos píxeles más corto de lo que realmente es.