CODEWITHSUNDEEP
htmlfirefoxgoogle-chromecss
Babiker
Babiker

Reputation: 18818

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

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

Answers (1)

DaiYoukai
DaiYoukai

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

Related Questions