CSS3 框大小 : margin-box; Why not?

Question

为什么我们没有 box-sizing: margin-box;？通常当我们在样式表中放置 box-sizing: border-box; 时，我们实际上指的是前者。

示例:

假设我有一个 2 列的页面布局。两列的宽度都是 50%，但它们看起来有点丑，因为没有 gutter(中间的空隙)；以下是 CSS:

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

要应用间距，您可能认为我们可以在两列的第一列上设置右边距；像这样:

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

但这会使第二列换行，因为以下情况为真:

50% + 50% + 24px > 100%

box-sizing: margin-box; 将通过在元素的计算宽度中包含边距来解决此问题。我会发现这个非常有用，如果不是比box-sizing: border-box;更有用的话。

Answer 1

你不能使用 width: calc(50% - 24px); 作为列吗？然后设置边距。