为什么 Chrome 会为 body 元素添加边距？ [复制]答案

【问题标题】：Why Chrome add margin to body element? [duplicate]为什么 Chrome 会为 body 元素添加边距？ [复制]
【发布时间】：2026-02-05 06:20:03
【问题描述】：

我有简单的 html 文档。是一种元素进入身体。当我在 div 元素中设置 margin-top 时，Chrome 会向 body 添加相同的边距。
边距仅对开发人员工具可见。我的代码：

<html>
<body>
<div id="main">Test</div>

<style>
body { background-color: red; }

#main { background-color: blue; margin-top: 100px; }
</style>
</body>
</html>

【问题讨论】：

可能重复 - *.com/q/7742720/104380
可能相关 - *.com/q/2680478/104380
可能相关 - *.com/a/33818444/104380
可能重复 - *.com/q/26311891/104380
...在声明这是与 Chrome 相关的问题之前，您是否检查过其他浏览器？

标签： html css google-chrome

【解决方案1】：

HTML Web 文档具有默认的 css 样式，如果您没有应用自己的任何样式，则这些值是默认值。您可以通过在这些特定元素上应用样式来覆盖它们。

例如，应用下面的样式，body 标签会失去其默认的 css 样式

body{
   margin:0;
}

【讨论】：

【解决方案2】：

将以下样式设置为body标签。

body {
    margin: 0;
    padding: 0;
}

Here 是 jsfiddle 链接。

【讨论】：

【解决方案3】：

您的代码看起来正确。（我尝试更改边距块编号并且成功了）

顶部的任何代码都可能会影响您的边距块。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<div id="main">Test</div>

<style>
body { background-color: red; }

#main { background-color: blue; margin-top: 100px; }
</style>

</body>
</html>

【讨论】：