似乎盒子大小:边框不起作用

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>

所有跨越3列都很好,直到我为.property div添加边距,现在通常因为边框,这只会在列之间添加边距并将它们连续3行,但现在由于某种原因,第3列被推到了新的排,老实说我不明白为什么,我错过了什么？

以下是jsFiddle的实例:http://jsfiddle.net/NmrZZ/

Answer 1

边距不是盒子模型的一部分(无论你使用什么样的盒子大小),所以它总是除了你声明的宽度+填充+边框之外.

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

我能给出的最好建议是完全避免网格的边距,并将其与演示文稿分开.这意味着更多的标记,但会节省您的头痛并使事情更容易维护.看看你的例子的这个分支.修改后的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>