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

Web_Designer picture Web_Designer · May 30, 2012 · Viewed 65.2k times · Source

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

Slouch picture Slouch · Nov 20, 2013

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