为何设置body的margin与padding为0后仍存在顶部间距？

这是**外边距折叠（Margin Collapse）**搞的鬼！

你已经把body的margin和padding都设为0了，但别忘了页面里的<p>标签自带默认的外边距（margin-top和margin-bottom）。在CSS规则里，当父元素（这里是.box，甚至往上到body、html）没有设置border、padding、非visible值的overflow等属性时，第一个子元素的margin-top会“穿透”父元素，和父元素的外边距合并，最终就表现成了页面顶部的空白间距。

说白了就是，<p>的默认margin-top没被.box和body拦住，直接作用到了页面最外层，所以顶部才会有空白。

给你几个简单的解决办法，选顺手的用就行： #

• 给.box加个padding-top: 1px;或者border-top: 1px solid transparent;，就能阻断外边距折叠
• 给.box设置overflow: auto;（或者hidden、scroll，只要不是默认的visible就行）
• 直接重置<p>的默认外边距：p { margin: 0; }

把这些方法加到你的CSS里试试，顶部的间距立马就没啦！

内容的提问来源于stack exchange，提问作者softshipper