我决定开始手工编码而不是使用框架。即使它看起来很好，但现在我遇到了一个来源不明的空白问题。
还有一个测试 site ，您可以在其中检查元素。
问题
这是问题的screenshot。 开发工具标记的蓝色区域和＆＃34;我们的投资组合＆＃34;口号。
在模板PSD文件中，第1节占用了568个像素，因此，假设我想要一个像素完美的样式，我将568px高度设置为.section-1元素
.section-1{
height: 568px;
}
即使Dev Tools告诉它它的高度真的是568像素，但是该部分被跟随并且之前是某种完全未知的空白。
我不想使用像
这样的解决方法.section-1{
margin-bottom: -140px;
}
但是想知道我的标记和产生这个空格的样式有什么错误。
更新
问题在于利润率的下降，以及Chrome和其他浏览器的问题。默认样式。
答案 0 :(得分：1)
margin-top: 118px上的.section-header导致问题
很难解释，但您可以在此处阅读有关折叠边距的更多信息http://sitepoint.com/web-foundations/collapsing-margins
答案 1 :(得分：1)
你陷入一个叫collapsing margins的陷阱。它是一个定义明确但却未知的行为。如果您了解它，它可能非常有用。
margin-top的{{1}}溢出。如果您将该边距更改为填充并添加.section-header，则额外的空格将会消失。