html - 奇怪的 CSS3 边距问题

Question

我目前正在观看 Team Treehouse 网站上的教程视频，但有一个我无法弄清楚的奇怪问题。

我在这里上传了练习网站:http://www.oneniceday.com/about.html

基本上，我试图为水平导航链接栏下方的整个部分添加 10% 的上边距。

因此，在适当的 ID 中，我在顶部添加了 10% 的边距:

#wrapper
{
max-width: 940px;
margin:10% auto;
padding:0 0%;
background-color:black;
}

然而，由于某些奇怪的原因，虽然 margin top 值应用于#wrapper 类，但浏览器似乎以某种方式将其应用于 H1 类，现在 H1 类在顶部有 10% 的 margin! (这就是为什么如果您查看我的网站，您会在绿行上方看到一个很大的空白)

这是怎么回事？

谢谢!

Answer 1

问题的发生是因为 header 有 float: left;，而 header 确实没有理由拥有那个属性。

如果您添加 float 来固定 h1 的边距，您可以改为添加此“clearfix”:

header::before {
    content: '';
    display: table;
    clear: both;
}