Reputation: 18818
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.
Upvotes: 6
Views: 3528
Reputation: 1908
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?
Upvotes: 12