使用float时如何删除页面顶部的空格？(How to remove space at top of page when using float?)

使用float时如何删除页面顶部的空格？(How to remove space at top of page when using float?)

我在网络上找到了一些答案，人们已经指示删除网页顶部空间的方式通常是以下形式：

body { margin: 0; padding: 0; }

来源： 如何删除页面顶部的空白？

请查看我目前正在设计的网页： http ： //web.p0orvmwy7k.treehouse-app.com/

我已经确定宣布float: left; 在header元素上生成页面顶部的空间。 我正在跟随树屋的样式教程，他们声称这现在没有任何效果，但在扩展到网站的桌面版本时会发挥作用。

自教程编写以来已经有几年了，所以关于浏览器的事情可能会有所改变，但我只是想知道是否有人可以向我解释为什么浮动header元素会在页面顶部产生这个空间当身体没有填充或边距而且标题没有上边距？

I have found a few answers around the web where people have instructed that the way to remove the space at the top of web page is generally some form of:

body { margin: 0; padding: 0; }

Source: How to remove blank space on top of page?

Please have a look at the web page I am currently styling: http://web.p0orvmwy7k.treehouse-app.com/

I have determined that declaring float: left; on the header element is producing the space at the top of the page. I'm following along with a styling tutorial on treehouse and they claim this has no effect right now, but will come into play when scaling up to the desktop version of the site.

It has been a few years since the tutorial was produced, so things could've changed in regards to browsers, but I'm just wondering if someone could explain to me why floating the header element would produce that space at the top of the page when the body has no padding or margin and the header has no top margin?

最满意答案

保证金是由#wrapper section p引起的。 删除该特定元素的边距，你应该没事。

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

但是你的footer仍会遇到同样的问题：如果要对它应用background-color ，那么底部也会有一个由child- p引起的间隙。 在这种情况下，您使用clear会导致与header相同的行为。

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

The margin is being caused by #wrapper section p. Remove the margin of that particular element and you should be fine.

Or as suggested, don't float your header.

You would still have the same problem with your footer though: if you were to apply a background-color to it you would also have a gap at the bottom caused by the child-p. In this case you are using clear which causes the same behaviour as for your header.

In general I would suggest you to take a better look on how and where to use float and clear ... http://css-tricks.com/all-about-floats/ should be a good start ;)