html - 使用 float 时如何删除页面顶部的空间？

Question

我在网络上找到了一些答案，其中人们指示删除网页顶部空间的方法通常是某种形式:

body {
    margin: 0;
    padding: 0;
}

来源:How to remove blank space on top of page?

请看一下我正在设计的网页:http://web.p0orvmwy7k.treehouse-app.com/

我已经确定在页眉元素上声明 float: left; 会在页面顶部产生空间。我正在学习有关 treehouse 的样式教程，他们声称这目前没有效果，但在扩展到网站的桌面版本时会发挥作用。

自教程制作以来已经有几年了，所以浏览器方面的情况可能已经发生了变化，但我只是想知道是否有人可以向我解释为什么 float 标题元素会在顶部产生那个空间当正文没有填充或边距并且页眉没有上边距时页面的页面？

Answer 1

边距是由 #wrapper section p 引起的。删除该特定元素的边距，你应该没问题。

或者按照建议，不要 float 你的header。

你的 footer 仍然会遇到同样的问题:如果你要应用 background-color 到它你也会在底部有一个空白导致由 child -p。在这种情况下，您使用的是 clear，它会导致与 header 相同的行为。

一般来说，我会建议您更好地了解如何以及在何处使用float 和clear ... http://css-tricks.com/all-about-floats/应该是一个好的开始 ;)