如何删除 div 和页面之间的空间 [重复]答案

【问题标题】：How can I remove space between div and page [duplicate]如何删除 div 和页面之间的空间 [重复]
【发布时间】：2021-07-20 04:02:15
【问题描述】：

<!DOCTYPE html>

<html>

<head>
    <title>Functions</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width initial-scale=1">
  
</head>

主体

    <div style="background-color: white; width: 100%; height: 80px; padding: 0px; margin: 0px;">

我想让这个 div 使用 100% 的屏幕宽度

</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

这是默认的 8px 正文边距。

body {margin: 0;}

【讨论】：

这应该是正确的.. 我刚刚检查了“我的用户代理样式表”
是的，它奏效了。 padding:0 没有工作，但 margin:0 工作。谢谢

【解决方案2】：

你快到了，只需要从它自己的 body 标记中删除默认边距和填充，其他所有东西都会适合。

body {
margin :0;
background-color: red;
}

div {
background-color: white; width: 100%; height: 80px;
}

<!DOCTYPE html>

<html>

<head>
    <title>Functions</title>

    <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
</head>
<body>
 <div>I am div</div>

</body>
</html>

【讨论】：

这很可能是由于浏览器具有默认样式表，例如Chrome automatically adds 8px margin for the body of the page.
是的，它似乎存在于您所知道的几乎所有其他浏览器中，几乎是某种影子标准。很烦人，是的，我对任何刚开始学习 HTML/CSS 的人的建议是使用规范化 css。 github.com/necolas/normalize.css
Padding: 0 是body 的默认值。你不需要再写一次。只需设置margin: 0;。
@pavel 就是这里的东西，一些浏览器及其版本要么考虑填充，要么考虑边距。你永远不知道，所以将两者都作为后备应用一直是一种很好的做法。只是为了确定。
@Syed：哪个浏览器在哪个版本中？重新声明默认值不是好习惯。回答“也许某处可能在未来”......不是答案。正文的边距是由于规范。

【解决方案3】：

您需要删除默认情况下自动应用于<html> 和<body> 标记的所有填充和边距，某些浏览器会这样做。删除后，您的元素将显示全角：

html, body { margin: 0; padding: 0; }
body { background-color: red; }
div { background-color: #fff; }

<!DOCTYPE html>
<html>
<head>
  <title>Functions</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1">
</head>
<div style="background-color: white; width: 100%; height: 80px; padding: 0px; margin: 0px;"></div>
</body>
</html>

【讨论】：

投票支持处理 html 和 body 以解决烦人的问题。
html 默认有margin: 0; padding: 0，body 默认也有padding: 0;。 body {margin: 0} 是问题的正确最小答案。
@pavel 这对于所有浏览器都不一致。这是对所有人进行纠正的唯一有效方法。
@BrandonMcConnell：至少一个浏览器和版本设置了 html 的边距/填充或正文的填充。谢谢。