Question

我有简单的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>

Answer 1

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

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

body{
   margin:0;
}

Answer 2

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

body {
    margin: 0;
    padding: 0;
}

Here是jsfiddle链接。

Answer 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>

为什么Chrome会为body元素添加边距？

3 个答案: