CSS3 box-sizing：margin-box;为什么不？ [英] CSS3 box-sizing: margin-box; Why not?

问题描述

为什么我们没有 box-sizing：margin-box; ？通常当我们把 box-sizing：border-box; 放在我们的样式表中时，我们就是前者。

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.

示例：

假设我有一个2列的页面布局。两列都有50％的宽度，但他们看起来很丑，因为没有天沟（中间的差距）;以下是CSS：

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;
}

要应用一个天沟，你可能会认为我们可以设置一个权利边距在第一列的2列;类似这样：

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; 将通过在元素的计算宽度中包括margin来解决这个问题。如果不是比 box-sizing：border-box; 更有用，我会发现这个非常有用。

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;.

推荐答案

您的cols不能使用 width：calc（50％ - 24px）; 然后设置您的边距。

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

这篇关于CSS3 box-sizing：margin-box;为什么不？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！