简体   繁体   中英

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.

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?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM