Question

In days (long past for some, and still present for others) the box-model bug was a bane to their existence. The idea that an element’s width included the margin, border, and padding was blasphemous and an abomination to their senses. So we got away from it after thousands of internet blogs about the box-model hack.

Now we get box-sizing, which will, wait for it, allow you to specify that a width contains the border, the margin, and the padding. We plaster a trendy new name for it, “CSS3 Flexbox,” and now it’s the freedom designers have been looking for.

For those logical people who saw the box-model bug as not the bug and the W3C as the actual bug, this comes as a surprise. A reintroduction of this so-called bug and now we call it an enhancement?

So can someone explain why this is different? I am honestly confused about this.

Answer 1

Now we get box-sizing, which will, wait for it, allow you to specify that a width contains the border, the margin, and the padding. We plaster a trendy new name for it, "CSS3 Flexbox," and now it’s the freedom designers have been looking for.

No, we call it the "border box" model. Flexbox is a totally different thing; it is unrelated to the box-sizing property, which is used to tell a browser how to calculate the dimensions of a box.

For those logical people who saw the box-model bug as not the bug and the W3C as the actual bug, this comes as a surprise. A reintroduction of this so-called bug and now we call it an enhancement?

So can someone explain why this is different? I am honestly confused about this.

It used to be considered a bug for a long time because at the time, there was only the One True Box Model (W3C content box model) which everybody had to follow when CSS was just beginning to pick up, and at that time IE was the black sheep. But then people — even those who hated IE’s guts — liked this bug, and so border box sizing was added into the CSS3 spec as an option. Plain and simple.¹

Note that IE5.x (and quirks mode IE²) will always continue to exhibit buggy behavior as per any version of the spec, and older versions of other browsers that didn’t support box-sizing will always follow the original content box model in standards mode (and sometimes, but not always, in almost standards mode).

---

¹ _{Now there are at least two, the original W3C content box model and the "new" border box model. There’s also a third padding box model being explored by Mozilla, but that’s not really relevant to what we’re talking about here, and it’s at risk of being dropped from the CSS3 UI CR anyway.}

² _{Depending on whom you ask, this may be regarded as a "feature" instead, as the primary purpose of quirks mode is to emulate buggy browser rendering for use with legacy code, and it is not intended for use with new code.}