欄與欄的間距：gutter觀念說明gutter on outside

• 實際上的container是940px總寬再加上最左邊和最右邊界的gutter on outside:10px(gutter width20px的一半) -> 960px
• gutter影響到整體影響到整體格線系統的穩定性

gutter是如何產生的？

• bs5 的container總寬度，是包含最左邊與最右邊的column欄所多出來的gutter on outside(padding)
• 因此實際上真正的內容是會向內縮一點
  
  
• 上圖中藍色就是gutter
• 只是最外層的右側與左側多的多的padding就會由row去解決
• 每個column左側與右側都有padding left 跟padding right的值而產生gutter
  所以整體來看，在最右邊的col(會多出padding-left)跟最左邊的col(會多出padding-right)=>gutter on outside（這會讓內容向內推擠些）
  ## row是如何解決這多出來的gutter/padding?
  
• 圖中的row會把這個由col而來的gutter/padding(向內推擠)的gutter on outside由row的負值margin來抵銷掉，如下圖
  

• 

• 因此bs5用外層的row來解決這個col產生的讓內容向內推擠的問題

• bs5用row把這群col包起來後，再去產生一個margin-left與margin-right的負值去抵銷這個column最外邊產生的padding-left和padding-right，到這裡row的margin-left與margin-right變成了gutter on outside（向外推擠）
• 但是row是div block會去向外層父元素靠攏撐滿整行，沒有父元素就去找body，這樣row接下的gutter on outside（margin向外推擠不計算在原來寬度）就變成了網頁會出現橫x軸

container是如何解決這row多出來的gutter/margin?

• 因此bs5用外層container再來解決row產生的gutter on outside橫軸問題
• 如果不把row用container包起來，就會產生x軸，因為margin不計算在總寬度裡，因此會超出原來的寬度
• 所以我們再把container將row整個包起來，這時候row的margin值又被container的padding left 和padding right抵銷了，因此gutter on outside現在是包含在container裡的寬度裡的padding值，但同時又可以讓內層的網頁內容不用貼齊邊緣，整體寬度又可以讓我們在掌控的狀態

gutter on outside是container內的padding

See the Pen gutter on outside by Sui Hsilan (@sui-hsialn) on CodePen.