Why do a div and a button with the same styles render at different sizes?

Question

I have a page with some clickable

elements, and I want to change them to s instead to make it easier to identify them via

相关标签:

Answer 1

Buttons and other input controls are rendered using the border-box model by default; i.e. content, padding and border all add up to the total width that you declare. They also often have some padding added by browsers arbitrarily according to their default stylesheets. As you quote, this is acceptable behavior and not a violation of standards; it's simply to accommodate rendering of OS-level GUI controls.

To get your button to be the same size as your div, size it according to the content-box model (which is "the" original W3C box model) and zero out its padding:

button.styled {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0;
}

jsFiddle demo