我决定开始手工编码，而不是使用框架。尽管看起来很好，但现在我遇到了一个空白的问题，我不知道它的来源。
还获得了一个测试站点，在那里您可以检查元素。
这是问题的截图。Dev Tools标记的蓝色区域和"Our Portfolio"口号之间的空间。
在模板PSD文件中，Section 1占用568像素，因此，假设我想要一个像素完美的样式，我将.section-1元素的高度设置为568px
.section-1{
height: 568px;
}
尽管开发工具告诉它的高度实际上是568像素，但该部分的后面和前面都是一些完全未知性质的空白。
我不想使用像
这样的变通方法.section-1{
margin-bottom: -140px;
}
但是我想知道我的标记和样式产生这些空白是怎么回事。
这个问题是与塌陷的边距，也与Chrome和其他浏览器的默认样式。
你掉进了一个叫做页边距塌陷的陷阱。这是一种很好的定义，但相当未知的行为。如果你了解它，它会非常有用。
你的.section-header的margin-top溢出。如果您将该边距更改为填充并添加margin-top: 0;，则额外的空白将消失。
margin-top: 118px在.section-header上引起问题
很难解释，但你可以在这里阅读更多关于折叠页边距http://sitepoint.com/web-foundations/collapsing-margins