Question

为什么我们没有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;更有用，我会发现这个非常非常有用。

Answer 1

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

Answer 2

我想我们可以有box-sizing: margin-box。 css框模型准确显示了框架边距的位置。

存在一些小问题 - 例如，边距框可以重叠 - 但它们并不难解决。

我认为，情况是一样的，我们可以看到overflow-x＆amp; overflow-y组合，其中绝对定位的div为表格单元格，min | max-width | height与box-sizing相结合，依此类推。

有一些功能，非常简单的功能，浏览器开发人员根本没有开发。

恕我直言，box-sizing: margin-box是一个非常有用的功能。另一个有用的功能是box-sizing: padding-box，它至少存在于标准中，但它并未在任何主流浏览器中实现。甚至没有最新的镀铬！

注意：@Oriol的评论： Firefox确实实现了box-sizing：padding-box。但其他人没有，它已从规范中删除。 Firefox将在版本50中将其删除。悲伤。

Answer 3

顶部的人要求在整体宽度上添加边距，包括填充和边框。问题是，当使用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

后者是我最喜欢的方法。

Answer 4

我确信这一切都是显而易见的，但无论如何我都要输入它，因为......好吧，我需要练习。以下结果不会像box-sizing: margin-box;那样有效：

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizing用于控制从哪个点评估填充和边框到元素的整体大小。因此，虽然包含宽度为px的{{1}}边距并不是犹太人（通常情况下通常如此），但更容易计算相对百分比金额应该是多少，因为您不必加入填充和边界到定义的宽度。

Answer 5

这是因为box-sizing属性是指在计算给定的特定于维度的值（填充，边框）之后元素的大小。 “box-sizing：border-box”设置元素的高度/宽度，并考虑填充和边框宽度。元素边距的范围大于元素本身，这意味着它修改了页面及其周围元素的流动，因此直接改变了元素相对于其兄弟元素在其父元素中的适应方式。最终，“边距框”属性值会导致严重问题，并且与直接设置元素高度/宽度基本相同。

Answer 6

在Codrops上有几篇关于边距影响和行被迫溢出的好文章。对于所有浏览器，他们建议将rem或em单位与normalizer css设置字体大小设置为100％，然后在设置宽度和边距时，只需在注释中添加注释即可轻松跟踪对行宽度的影响。总宽度。将16px转换为1 em是计算目标视口总数的方法。

至少为开发阶段工作，然后如果你想要'响应'模板，你可以将宽度转换为％，包括边距宽度。

他们建议处理装订线的另一种通常更简单的方法是使用伪后跟和每个列上的content: '';，我发现它们的效果非常好。如果你设置一个div类，它是定义的最后一列，比如end，那么你可以将该类定位为不具有伪后的列，或者具有更宽的一个;最适合你的布局。

使用这种伪元素方法的另一个好处是，它还为您提供了阴影的目标，可以为读者监视器上的平面图像提供更多的3D效果和更大的深度。我正在通过放大按钮上使用的效果，“调整”渐变和z-index来尝试此效果。

Answer 7

block-level, non-replaced elements in normal flow的尺寸必须满足

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right =包含块的宽度

当过度约束时，浏览器必须调整左边距或右边距。我认为这意味着边距框的宽度必须等于包含块的宽度（即100％）。

对于您的情况，transparent borders with box-sizing: border-box can work much like margins。

Answer 8

也许使用RGBA将边框设置为0％不透明度，并将边框用作边距。

Answer 9

在体内内容中使用 box-sizing 的情况很有趣

没有内容，没有边框，这两个方框重新计数算法的左右边距％都没有任何值

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

57之前的Firefox版本也支持以下选项的padding-box值：大小调整，尽管此值已从规范中删除和更高版本的浏览器。

所以没有计划装订边箱...

Answer 10

应该有一个框大小：margin-box;

但是可以进行以下工作：用

在其周围放置一个div

      .divX{
         width:  XX%;
         display:flex;
         align-items: center;
        justify-content: center;
      }

CSS3 box-sizing：margin-box;为什么不？

10 个答案: