Does a CSS border on a <div> act differently?

Question

the name may be a little obscure, so here is a screenshot of what I mean:

HTML and CSS Sourcecode

All elements use the same CSS class, so shouldn't they have the same width? The larger the boundary, the greater the difference. How to make sure div and other elements have the same width?

Thanks in advance!

Answer 1

, HTML. , - , W3C set width, .

(IE < 8 ..), :

div.style {
    /* By default, browsers would have set this as content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

( ) width <div>.

, :

button.style, textarea.style {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

, .