box-sizing：border-box不能與Cleanslate.css配合使用

Question

我使用Cleanslate來重置我的Widget容器及其子元素上的所有CSS屬性，並且我試圖將box-sizing: border-box添加到所有元素中，但它不像預期那樣行事。

寬度爲100％的錨元素（設置爲display: inline-block）不會從寬度中減去其填充/邊距。我有一個Codepen，顯示我在這裏看到的行爲：http://codepen.io/anon/pen/dXarGy。

有人能幫我弄清楚這裏發生了什麼嗎？ CSS並不是那麼棒。提前致謝！

Answer 1

boder-box不應該減去保證金。

w3schools：

的寬度和高度屬性（和最小/最大性能）包括內容，填充和邊界，但不是保證金

所以它看起來像你的例子正在爲預期的那樣要設置保證金：

margin: 12px 20px !important; 

被添加到您的width: 100%;

另請參閱this article關於框尺寸。