Question

这里有一个非常简单的网页。一个div，基本上。但是这个div在它周围没有任何区域，尽管我的宽度设置为100％。这是一张展示的图片。

enter image description here

以下是我的代码。

<html>
    </head>

        <link href='mainStyle.css' rel='stylesheet'/>

        <script src='jquery.js'></script>

    </head>
    <body>

        <div id='navTop'></div>

    </body>
</html>

我的mainStyle.css：

#navTop{
    width:100%;
    height:10px;
    background-color: blue;
    position: absolute;
    margin: none;
    padding: none;
}

这可能只是一个愚蠢的CSS错误。任何帮助表示赞赏！

Answer 1

添加：

body {
margin: 0;
}

浏览器默认提供<body> 8px的保证金

Answer 2

浏览器在各种元素上都有默认的边距/填充，包括html和body。如果您希望div直接到达边缘，您还需要将它们设置为零。

Answer 3

可能是因为你<body>需要将它的边距和填充设置为0。

<强> CSS：
body { margin: 0px; padding: 0px; }

Answer 4

您的浏览器具有默认样式（font-size，font-familly，line-height等，包括文档周围的边距和填充）。

为避免文档周围留出额外空间，您可以添加CSS：

body,div,p { margin:0;padding:0; }

所以这些元素不会保留默认值。

另一种奇特的方法是使用CSS reset script来确保几乎所有默认样式都被覆盖为0 / null，因此只有你自己的规则可以计算。

HTML / CSS - 为什么我的页面周围有一个小的空白区域？

4 个答案: