當我需要填充和邊距時，如何使用網格工作？

Question

我一直沒有使用任何類型的網格系統，因爲我總是把它和填充和邊距搞混了。

讓我們坐在我的網格是在90像素，我有這樣的代碼：

//HTML 
<div class="col1"> 
<div class="content"> 
    Hello world 
</div> 
</div> 

//CSS 
.col1 { width: 90px; margin: 0px; padding: 0px; background-color: #444; } 
.content { margin: 20px; color: #fff; background-color: #0087d5; width: 100%; } 

JSfiddle here。

如何使用網格工作，確保網格保持90px的寬度，同時在20px填充/邊距的100％寬度內有'div'？

我知道這裏有很多網格系統，我測試了一些網格系統，但我必須「錯誤地攻擊」這種方式，因爲當我開始使用填充來獲得一些空間時，網格總是展開。

Answer 1

你應該申請box-sizing，計算寬度（即90px + 10px進行填充時佔填充，將適用於填充向內，而不是創建一個總寬度的110px。如果你想成爲額外的安全，將它添加到您的重置或標準化的樣式表：

* { box-sizing: border-box } 

對於舊版本的Safari &火狐：

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box } 

使用通配符選擇符允許box-sizing屬性應用於所有元素。我知道這包括在那裏的一些網格系統中，例如Skeleton。