CSS3框大小:边距框；为什么不？
为什么我们没有box-sizing: margin-box;呢？通常，当我们将box-sizing: border-box;放在样式表中时，我们实际上是指前者。
示例：
假设我有一个2栏的页面布局。这两列的宽度都为50%，但它们看起来有点难看，因为没有沟槽(中间有空隙)；下面是CSS：
.col2 {
width: 50%;
float: left;
}要应用一个排水沟，您可能认为我们可以为这2列中的第一列设置一个正确的页边距；如下所示：
.col2:first-child {
margin-right: 24px;
}但是，这将使第二列转到新行上，因为以下内容是正确的：
50% + 50% + 24px > 100%box-sizing: margin-box;将通过在元素的计算宽度中包含边距来解决这个问题。如果不是比box-sizing: border-box;更有用的话，我会发现它非常有用。
回答 10
Stack Overflow用户
发布于 2013-11-20 07:00:43
你不能用width: calc(50% - 24px);做你的结肠吗？那就设定你的毛边。
Stack Overflow用户
发布于 2013-11-25 02:30:16
我想我们可以有一个box-sizing: margin-box。css框模型准确地显示了框架边距的位置。
有一些小问题--例如，页边距框可能重叠--但它们并不难解决。
我认为，情况是一样的，就像我们可以看到的，overflow-x和overflow-y组合，绝对位置的div在表格单元中，最小的最大的宽度-宽度的高和盒子大小的组合，等等。
有些特性，非常简单的特性，浏览器开发人员根本没有开发。
IMHO，box-sizing: margin-box是一个非常有用的特性。另一个有用的特性是box-sizing: padding-box，它至少存在于标准中，但它没有在任何主要浏览器中实现。即使是最新的镀铬！
注意：@Oriol的评论: Firefox确实实现了框大小:填充框，但其他人没有，并且它被从规范中删除了。Firefox将在版本50中删除它。
Stack Overflow用户
发布于 2013-11-23 04:36:59
在上面的人要求增加总的宽度，包括填充和边框的毛边。问题是，在使用border-box时，边距是在框外应用的，而填充和边框则不是。
我一直在努力实现border-margin的想法。我发现，如果使用.last，您可以在最后一个项中添加一个类(带边距，然后应用零的边距，或者使用:last-child/:last-of-type)。或者添加等边距(类似于上面的填充版)。
参见这里的示例：http://codepen.io/mofeenster/pen/Anidc
border-box计算元素的宽度+填充+边框作为总宽度。因此，如果你有2个div，宽50%，它们就会相邻。如果您向它们添加8px填充，那么您将有一个16px的沟槽。结合一个包装元素-它也有填充的8px -你将有一个很好的布局网格与平等的排水沟所有的方式。
参见这里的示例：http://codepen.io/mofeenster/pen/vGgje
后者是我最喜欢的方法。
https://stackoverflow.com/questions/10808413
复制
![[Java小工匠]CSS盒子模型-边距合并](https://ask.qcloudimg.com/http-save/yehe-2512807/6rhyw9fvjz.png)
相似问题
GTK对话框边距不工作
框大小问题，页边距会导致溢出。
调整窗口大小时影响框阴影的边距
为什么盒子大小不包含页边距
不考虑边距和框大小的Flex项目:边框
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
