100% 的 Div 宽度不占用页面的 100%？ [复制]答案

【问题标题】：Div width of 100% doesn't take 100% of the page? [duplicate]100% 的 Div 宽度不占用页面的 100%？ [复制]
【发布时间】：2014-01-16 16:04:49
【问题描述】：

当我在 div 上使用 100% 宽度时，它会在 div 的顶部和两侧留出空间。

<!DOCTYPE html>
<html>
<!--Head-->
<head>
    <title>Music</title>
</head>
<!--Body-->
<body>
    <div style = "background-color: #0FCCB3; height: 10em; width: 100%;"> </div>
</body>
</html>

变成：

看到顶部和侧面的空白了吗？我该如何摆脱它？

【问题讨论】：

标签： css html width

【解决方案1】：

这是因为 BODY 元素有边距。

添加如下样式：

<style>
body { margin: 0px; }
</style>

【讨论】：

天哪，谢谢你，非常感谢

【解决方案2】：

这是 body 元素上的边距（或填充），只需将其删除

body{
    margin:0;
    padding:0;
}

http://jsfiddle.net/Th53K/

【讨论】：

【解决方案3】：

这来自 body 标签的填充或边距值。通过以下方式删除它们：

body{
  margin:0;
  padding:0;
}

浏览器应用一些默认样式，对于不同的浏览器和版本，这些样式可能不同。为避免浏览器默认设置带来意外，您可以使用css reset

【讨论】：

【解决方案4】：

您需要重置浏览器的默认样式。在这种情况下，您可以这样做

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

但我建议在开始项目时使用 normalize.css http://necolas.github.io/normalize.css/ 来获得一个干净的状态。

【讨论】：