Html 出现了性质未知的空白。固定高度

我决定开始一些手工编码，而不是使用框架。尽管看起来很好，但现在我遇到了一个源自uknown的空白问题

还有一个测试，你可以在那里检查元素

问题

这是问题的症结所在。 由开发工具标记的蓝色区域和“我们的投资组合”口号之间的空间

在模板PSD文件中，节1占据568像素，因此，假设我想要像素完美的样式，我将568px高度设置为

.Section-1

元素

.section-1{
    height: 568px;
}

尽管开发工具告诉我们它的高度实际上是568像素，但是这个部分后面和前面都是一些性质完全未知的空白

我不想像这样使用变通方法

.section-1{
   margin-bottom: -140px;
}

但是我想知道产生空白的标记和样式有什么问题

更新

---

问题在于折叠式页边距，以及Chrome浏览器和其他浏览器的默认样式。

A

页边距顶部：118px

on

。部分标题

导致了问题

很难解释，但是你可以在这里读到更多关于崩溃的页边空白的内容。这是一种定义明确，但并不为人所知的行为。如果你知道它，它会非常有用

---

节头的
页边距顶部
溢出。如果您将边距更改为填充，并添加
边距顶部：0，额外的空白将消失。
A
margin top:118px
on。部分标题导致问题