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

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之间的区别：

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

Answer 2

这是一个浮动明显的问题。而不是浮动，你可以使用内联块，因为浮动过时。大多数人现在都使用display:inline-block，因为无需为单独的行编写clear。

<强>参见：

*, *:before, *:after {
	margin: 0;
	padding: 0;

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

body {
    background: grey;
}
}

.row {
	clear: both;
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clear {
    zoom:1;
}

.column {
	display: inline-block;
	}

.span-4-12 {
	width: 30%; 
}

.property {
    background: white;
    margin-left: 2%;
}

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