logo标签列表

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

htmlcssgoogle-chrome
3


我有一个简单的HTML文档，只有一个div元素在body中。当我在div元素中设置margin-top时，Chrome会将相同的margin添加到body中。
margin仅在开发者工具中可见。
我的代码：

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

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

#main { background-color: blue; margin-top: 100px; }
</style>
</body>
</html>
1
可能是重复问题 - https://dev59.com/oVzUa4cB1Zd3GeqP0Si4 - vsync
可能相关-https://dev59.com/B3E85IYBdhLWcg3wpFIa - vsync
请仅返回翻译文本：可能相关 - https://stackoverflow.com/a/33818444/104380 - vsync
可能是重复问题 - https://dev59.com/iYTba4cB1Zd3GeqP2S17 - vsync
你在宣布这是Chrome相关问题之前，有检查其他浏览器吗？ - vsync
3个回答
1
一份HTML网页文档具有默认的CSS样式，如果您没有应用自己的样式，这些值将被默认设置。您可以通过在特定元素上应用样式来覆盖它们。
例如，应用以下样式，body标签将失去其默认的CSS样式。
body{
   margin:0;
}
0

你的代码看起来没问题。（我试着改变了边距块的数字，它起作用了）

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

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

0

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

body {
    margin: 0;
    padding: 0;
}

这里是 jsfiddle 的链接。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接