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

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

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; 将通过在元素的计算宽度中包含边距来解决这个问题.如果不是比 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屋！