box-sizing:border-box不能与Cleanslate.css一起使用

时间:2016-08-12 22:37:16

标签: html css css3

我使用Cleanslate重置我的小部件容器及其子容器上的所有CSS属性,并且我尝试将box-sizing: border-box添加到我的所有元素中,但它& #39;表现不尽如人意。

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

有人可以帮我弄清楚这里发生了什么吗?我对CSS并不是那么好。提前致谢!

1 个答案:

答案 0 :(得分:1)

boder-box不应该减去保证金。

w3schools

  

宽度和高度属性(以及最小/最大属性)包括内容,填充和边框,但不包括边距

因此,您设置保证金似乎正如您预期的那样工作:

margin: 12px 20px !important;

已添加到您的width: 100%;

另请参阅this article有关框尺寸的信息。