爲什麼SASS（來自Refills/Boubon.io）會導致元素周圍出現空白？

Question

我使用非常好的SASS框架，Boubon.io來自偉大的人一個想法。我試圖測試它們提供的模板（稱爲Refills），它使Bourbon.io成爲Bootstrap等流行框架的更靈活的替代替代品。

大多數情況下，這些都是非常簡單的設置，但是我對由整個導航欄和頁腳欄周圍出現的空白造成的空白感到困惑，這些空白僅僅是通過從Refills模板中複製粘貼這些元素而產生的。

Here is what I get。一切似乎都在呈現在Refills示例中，但我對頁眉和頁腳框周圍的空白感到困惑。用螢火蟲進行快速檢查並沒有發現任何明顯的問題，所以我不知道如何解決這個問題。

道歉的缺乏更小的js-小提琴的例子;但在需要導入這些SASS框架時不起作用。來源可以在這GitHub gh-pages branch repo;因爲Jekyll在GH頁面上編譯SASS以提供示例;我剛剛把所有潛在的bourbon.io，整潔，和SASS文件也放在裏面。

Answer 1

body標籤上設置了8px頁邊距。擺脫這一點，你是金。確保你使用某種CSS重置。這是Bootstrap在默認情況下所做的事情，但我不能說替補品。

此外，由於您的footer是display: inline-block，您會在底部獲得額外保證金。如果您將footer更改爲display: block，則在其末尾添加一個清除修復div。藍色背景仍然應該是正確的高度，並刪除底部多餘（不可見）的邊距