html - 框大小 : border-box not working with Cleanslate. css

Question

我正在使用 Cleanslate重置我的小部件容器及其子项上的所有 CSS 属性，我正在尝试将 box-sizing: border-box 添加到我的所有元素，但它没有按预期运行。

具有 100% 宽度的 anchor 元素(设置为 display: inline-block)不会从宽度中减去它的 padding/margin。我有一个 Codepen，它显示了我在这里看到的行为:http://codepen.io/anon/pen/dXarGy .

有人可以帮我弄清楚这里发生了什么吗？我不太擅长 CSS。提前致谢!

Answer 1

boder-box 不应该减去边距。

w3schools :

The width and height properties (and min/max properties) includes content, padding and border, but not the margin

因此，您的示例似乎在设置边距时按预期工作:

margin: 12px 20px !important;

添加到您的 width: 100%;

另见 this article关于盒子大小。