如何摆脱页面顶部的空白？ [复制]答案

【问题标题】：How can I get rid of white space from the top of the page? [duplicate]如何摆脱页面顶部的空白？ [复制]
【发布时间】：2021-12-04 06:32:19
【问题描述】：

我是网络开发新手，我正在尝试更多地了解页面顶部的空白区域。

这是我的代码 sn-p：

HTML：

<div>
    <p>lorem ipsum</P>
</div>

CSS：

div {
    background-color: black;
}

我尝试将 body 元素的边距设置为 0，但浏览器的最顶部仍会显示空白。

body {
    margin: 0;
}

然后我尝试在 div 中添加填充，空白将不再存在。

div {
    padding-top: 100px;
}

但是还有其他方法可以消除空白吗？

另外，我的理解是浏览器默认设置了边距，为什么我将body元素的边距设置为0后空白仍然存在？

【问题讨论】：

标签： html css

【解决方案1】：

您可以将 HTML 元素的边距和内边距都指定为 0，以删除 HTML 元素周围的所有空白。

html {
  margin: 0;
  padding: 0;
}

同样的技术可用于删除任何给定元素周围的所有空白。默认情况下， p 标签将包含一个附加边距，从而产生更多空白。要完全删除给定场景的所有空格，您可以将上述 CSS 块编辑为以下内容：

html, body, p {
  margin: 0;
  padding: 0;
}

【讨论】：

【解决方案2】：

你也可以用这个：

*{
    margin :0;
    padding :0;
    box-sizing :border-box;
}

【讨论】：