Why is the height of the button element not the same as the height of the element with the same height?

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 1px button element shorter than the rest? in Chrome and firefox.

Answer 1

This is due to the way the browser implements the window model for these elements.

divand inputuse content-boxwhere-how buttonusesborder-box

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

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

CSS, content-box .

- : Firefox IE ?