Relleno de CSS agregado a alto/ancho para <input type = 'submit'>

Question

Si se ha formulado esta pregunta, me disculpo, pero no pude encontrar la misma pregunta. Como dice W3schools, ¡La propiedad de altura no incluye relleno, bordes o márgenes!(link). Así que aquí es una simple declaración de estilo:

input { 
    width:180px; 
    height:18px; 
    padding:7px; 
    border:1px solid black; 
} 

y aquí está html:

<input type='text' name='text' value='194px by 32px' /><br /> 
<input type='submit' name='button' id='button' value='180px by 18px' /> 

El campo de texto es 194px por 32px como se esperaba, pero el botón de envío es 180px por 18px. Obviamente, puedo aumentar la altura del ancho del botón & dos veces el relleno, pero quiero entender por qué hay una discrepancia. Hice un jsfiddle aquí: http://jsfiddle.net/RRf5A/. Gracias por tu ayuda. FYI, ya intenté <button> en lugar de enviar entrada, y display:inline-block.

Answer 1

Puede solucionar esto agregando box-sizing: content-box; para ingresar elementos del tipo enviar. En lugar de entrar en detalles, solo te enviaré al http://www.quirksmode.org/css/box.html. Sin embargo, actualmente no es compatible en general, por lo que es mejor que la compatibilidad entre navegadores declare específicamente diferentes alturas y rellenos para los botones de envío.