CSS box-sizing 屬性為什麼沒有 margin-box？
來自這個問題：
CSS3 box-sizing: margin-box; Why not?Why dont we have box-sizing: margin-box;? Usually when we put box-sizing: border-box;in our style sheets we really mean the former.
Example: Lets say I have a 2 column page layout. Both columns have a width of 50%, but they look kind of ugly because theres 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;.
http://lists.w3.org/Archives/Public/www-style/2010Jan/0008.html
簡單說就是沒有足夠的use cases。
box-sizing出現是border-box有強烈的需求，在許多場合也更符合大多數人對於sizing的直覺。但margin-box其實很少人會這樣理解sizing。
stackoverflow這個提問者的需求改用border和border-box，或者用calc函數，或者改用flexbox等都可以達成，且可能更符合直覺。況且margin存在collaspe和負值，如果要引入margin-box，會有點複雜，理解成本估計比前面的那些方式都要高。除去賀老說的margin-box的實現複雜度之外，最重要的還是用戶場景需求是否足夠的問題，在目前看來，實際有margin-box需求的case非常少。
推薦閱讀：