Html 为什么导航和标题div之间存在间隙/空格？

希望有人能解释为什么“导航”和“标题”div之间存在差距？我认为这与文本有关，但无法为CSS找到正确的解决方案。任何帮助都非常感谢：）

html，正文{
保证金：0；
填充：0；
身高：100%；
}
身体{
背景色：黑色；
字号：0.8em；
}
音频{
宽度：300px；
}
.标题{
宽度：100%；
身高：10%；
字号：0.9em；
字体系列：无衬线；
文本对齐：居中；
颜色：白色；
背景颜色：棕色；
填充：0；
保证金：0；
}
.导航{
宽度：100%；
身高：7%；
填充：0；
保证金：0；
背景颜色：灰色；
}
#主要{
宽度：100%；
身高：100%；
}
.歌词{
最大宽度：80%；
保证金：0自动；
高度：自动；
填充：20px 50px 20px 50px；
颜色：白色；
}

试验
网页
文本1

文本2

文本3

我相信你说的是“网页”标题上方的黑色空间？在这种情况下，您只需要删除h1的上边缘，就像我在下面所做的那样：

html，正文{
保证金：0；
填充：0；
身高：100%；
}
身体{
背景色：黑色；
字号：0.8em；
}
音频{
宽度：300px；
}
.标题{
宽度：100%；
身高：10%；
字号：0.9em；
字体系列：无衬线；
文本对齐：居中；
颜色：白色；
背景颜色：棕色；
填充：0；
保证金：0；
}
.导航{
宽度：100%；
身高：7%；
填充：0；
保证金：0；
背景颜色：灰色；
}
#主要{
宽度：100%；
身高：100%；
}
.歌词{
最大宽度：80%；
保证金：0自动；
高度：自动；
填充：20px 50px 20px 50px；
颜色：白色；
}
h1{页边距顶部：0；}

试验
网页
文本1

文本2

文本3

删除h1的上边距

使用firebug进行检查——这始终是找到您意想不到的空白/空格/填充/边距的最佳方法。浮动在firebug HTML选项卡上的h1代码段上，您可以看到它突出显示空格，因此，您可以将h1识别为问题所在。

标题

和

导航

都有html5标记。虽然是真的，但它没有解释这背后的原因。当然，它来自浏览器的默认样式表

h1

@Barmar，但是OP问了

为什么会有缺口…

不是

是什么导致了缺口…

。啊，但是OP说是h1导致了问题，我们可以推断他想知道原因是什么，不一定是为什么。好吧，我把这作为一个评论而不是回答；原因是两个或多个块级元素的相邻垂直边距折叠为一个边距，其值最大-请参见：