Estoy tratando de hacer un estilo bastante preciso en algunos elementos de formulario, y este problema me está causando mucho dolor.

Si trato de eliminarpadding, margin, border youtline desde un<input> (condisplay: block) para que el tamaño del campo esté puramente determinado por el texto, el campo de entrada termina teniendo unos pocos píxeles de relleno adicional que cualquier otro elemento de nivel de bloque diseñado exactamente de la misma manera. Aquí hay un ejemplo:http: //jsfiddle.net/nottrobin/b9zfa

<input class="normalised testSubject" value="hello" />
<div class="normalised testSubject">hello</div>

Representación

En ese ejemplo, la<div> obtiene una altura calculada de16px mientras que la<input> obtiene una altura calculada de19px.

Obtengo el mismo comportamiento en Chrome 16, Firefox 9 y Opera 11, por lo que claramente hace que el motor sea independiente.

Puedo solucionar el problema agregando manualmente una altura, pero no quiero hacerlo porque quiero que el diseño siga siendosensibl.

¿Alguien puede ayudarme a entender lo que está sucediendo aquí y cómo puedo asegurarme de que el<input> tendrá la misma altura que cualquier elemento de nivel de bloque que lo siga?