为什么按钮元素的高度与具有相同高度属性的兄弟输入元素的高度不匹配？

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?