Borde del botón que aparece dentro de la altura del objeto

Question

Esto no es un problema importante ya que se puede modificar fácilmente con un poco de CSS, algo que me interesa saber. ¿Por qué el borde aparece dentro de la altura de un elemento de botón en lugar de afuera, como por modelo de caja? En el siguiente ejemplo, tengo un elemento de botón y un elemento de anclaje. Ambos altura 30px, con un borde de 1px. Sin embargo, el elemento de botón aparece con un efecto de 2px que el anclaje (que se muestra correctamente a una altura total de 32px).

http://jsfiddle.net/Y9Rv7/1/

Gracias

Answer 1

Sumado al estilo debe resolver su problema

box-sizing: content-box 

Esto hará que el elemento de render como desee. Creo que, por defecto, los botones se procesan con el comportamiento border-box que provoca que se agreguen relleno y bordes dentro de la casilla.