Html 框大小：边框框似乎不起作用

我从未遇到过这个问题，但简而言之，我将边框框作为框大小应用于所有元素：

*, *: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>

在我将margin添加到.property div之前，所有列都很好地跨越了3列，现在通常由于边框框的缘故，这只会在列之间添加margin并将它们保留为3行，但现在由于某种原因，第3列被推到了新行，我真的不明白为什么，我遗漏了什么吗

---

下面是一个关于JSFIDLE的实时示例：

边距不是方框模型的一部分（无论您使用什么样的方框大小），因此它总是在您声明的宽度+填充+边框之外

下图（来自关于此主题的文章）说明了标准长方体模型和

长方体大小：边框长方体

之间的区别：

我能给出的最好建议是完全避免网格的空白，并将其与演示分开。这意味着更多的标记，但会让你省去麻烦，让事情更容易维护。看看你的例子。经修正的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>    

一些文本1

这是一个浮动清除问题。因为float已经过时，所以可以使用inline块代替float。大多数人现在使用

display:inline block

，因为不需要为单独的行写入

clear

参考：

*，*：之前，*：之后{
保证金：0；
填充：0；
-webkit框大小：边框框！重要；
-moz盒尺寸：边框盒！重要；
-ms框大小：边框框！重要；
框大小：边框框！重要；
}
身体{
背景：灰色；
}
}
.行{
明确：两者皆有；
}
.clearfix:之前，
.clearfix:之后{
内容：“；
显示：表格；
}
.clearfix:之后{
明确：两者皆有；
}
.清楚{
缩放：1；
}
.栏目{
显示：内联块；
}
.span-4-12{
宽度：30%；
}
.财产{
背景：白色；
左缘：2%；
}

一些文本1

一些文本2

一些文本3

边距不属于

边框框的一部分。因此
宽度：33.333%（3）+侧边距>100%
，因此最后一个元素被推到下一个元素row@ZachSaucier真的，我发誓这对我以前是有效的，有没有一种方法可以将这种行为应用到边距上？你必须从宽度中减去%的边距。在你的情况下，5年后宽度为31.3333%，这仍然是一个很好的答案