css - CSS3 box-sizing: margin-box; Why not?

Question

Why don't we have box-sizing: margin-box;? Usually when we put box-sizing: border-box; in our style sheets we really mean the former.

Example:

Let's say I have a 2 column page layout. Both columns have a width of 50%, but they look kind of ugly because there's no gutter (gap in the middle); Below is the CSS:

.col2 {
    width: 50%;
    float: left;
}

To apply a gutter you might think we could just set a right margin on the first of the 2 columns; something like this:

.col2:first-child {
    margin-right: 24px;
}

But this would make the second column wrap onto a new line, because the following is true:

50% + 50% + 24px > 100%

box-sizing: margin-box; would solve this issue by including margin in the calculated width of the element. I would find this very useful if not more useful than box-sizing: border-box;.

Answer 1

Couldn't you use width: calc(50% - 24px); for your cols? Then set your margins.