Why does a button element's height not match that of a sibling input element with same height properties?

Question

I have the following:

<div    style="border:solid 1px gray; height:22px; line-height:22px; display:inline-block;">Div</div>
<input  style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;" type="text">
<button style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;">Button</button>

As you can see in this jsFiddle, Why is the button element 1px shorter than the rest? in Chrome and firefox.

Answer 1

It has to do with the way the browser implements the box model for those elements.

div and input both use the content-box where-as button uses border-box

See here for more info: http://www.quirksmode.org/css/box.html

You can add box-sizing: content-box;, -moz-box-sizing: content-box;, -ms-box-sizing: content-box;

to the CSS to force it to use the content-box method of calculating dimensions.

Edit--More Info: Why does Firefox use the IE box model for input elements?