CSS border on a <div> acts differently?

Question

the title may be a little unclear, so here's a screenshot of what I mean:

HTML & CSS Sourcecode

All elements use the same CSS class, so shouldn't they all have the same width? The bigger the border gets, the bigger the difference becomes. How do I make sure the div and the other elements have the same width?

Thanks in advance!

Answer 1

This happens because box sizing is different between form elements and normal HTML elements. If it's not a form element, the box model used is the one W3C used to preach where border and padding add to the set width property to make it larger than you specified.

If you don't care about legacy browser support (IE < 8, etc), you can just do this:

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;
}

And your border (and any existing horizontal padding) will be part of the width property of your <div>.

To do it the other way around, instead of the above:

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

Again, these properties are only supported by modern browsers.