html - 似乎 box-sizing : border-box is not working

Question

我从来没有遇到过这个问题，但简而言之，我将边框框用作所有元素的框大小:

*, *:before, *:after {

      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      -ms-box-sizing: border-box !important;
      box-sizing: border-box !important;
    }

我有一个响应式列布局，在本例中每行 3 列

<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>..</p>
   </div>

   <!-- more divs here -->
</div>

在我向 .property div 添加边距之前，所有内容都很好地跨越了 3 列，现在通常是因为边框框，这只会在列之间添加边距并使它们连续 3 列，但现在由于某种原因，第 3 列被插入到新的一行，我真的不明白为什么，我错过了什么吗？

这是 jsFiddle 上的实例:http://jsfiddle.net/NmrZZ/

Answer 1

边距不是盒子模型的一部分(无论您使用什么盒子大小)，所以它总是在您声明的宽度 + 填充 + 边框之外。

下图(来自关于此主题的 CSS Tricks 文章)说明了标准盒模型和 box-sizing: border-box 之间的区别:

我能给出的最好建议是完全避免网格的边距，并将其与演示文稿分开。这意味着更多的标记，但会让您省去麻烦并使事情更容易维护。查看this fork你的例子。修改后的 CSS:

.span-4-12 {
    width: 33.33%;
    padding-left: 2%;
}

.property {
    background: white;
}

新标记将是:

<div class="column span-4-12">
    <div class="property">
        <p>Some text 1</p>
    </div>
</div>