The official W3C CSS 2.1 Box Model Specification states that when setting the width of an element, the margin, border, and padding are not included in the calculation.
When you specify the width or height properties in CSS, you are defining the size of the content area within the box, excluding the padding, margin, and border.
For example:
div { width: 100px; padding: 10px; margin: 20px; border: 2px; }
The total width including borders is calculated as width + padding-left + padding-right + border-right-width + border-left-width.
Margins are considered outside the border-box.
The intended width according to CSS specifications remains 100px.
Internet Explorer has two rendering modes, 'Standard Mode' and 'Quirks mode'.
To ensure IE follows CSS Standards properly, you should force it into 'Standard Mode' by including the appropriate DOCTYPE declaration. Learn more about this technique known as 'doctype-switch' here.
Most browsers, like Firefox, adhere to the standard box model without issues.
You can refer to the detailed W3C box model specification here, or check out a simpler guide on the topic here.
It's worth noting that CSS 3 will introduce the box-sizing property, allowing for more control over how elements interpret the width property (including or excluding padding and borders). However, widespread adoption of these new CSS 3 features may take some time.