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;
.
Couldn't you use width: calc(50% - 24px);
for your cols? Then set your margins.