Question

我正在处理一些项目中的这个问题。

我确定这是一个基本问题，我已经尝试寻找答案，但无济于事。

页面的代码是：

HTML

<html>
    <head>
    <link rel="stylesheet" href="cssbin/default.css" type="text/css">

    </head>

    <body>

        <header>
        </header>

        <nav>

        </nav>

        <section>


        </section>

        <footer>

        </footer>
    </body>
</html>

CSS：

body {
    background-color: #B3BDE6;
}

header {
    height: 200px;
    background-color: #020C36;
}

nav {
    height:100px;
    background-color: #7A8FE6;
}

section {
    height:500px;
    background-color: #2B314D;
}

footer {
    height: 200px;
    background-color: #020c36;
}

body, header, nav, section, footer {
 border: 1px solid black;
}

下面的网页显示了我在说什么：

http://virtualharrogate.co.uk/template.php

在谷歌浏览器中页面被框起来，我不确定这是否发生在每个浏览器中，但我需要纠正铬的问题，如果没有别的...

我问为什么那里的边界（因为我显然忽略了某些地方的某点）以及如何解决这个问题？

我尝试使用css属性width: 100%; & height: 100%;设置样式，但仍然没有。

提前致谢

Answer 1

这是因为默认情况下body有margin:8px。

以下是默认样式表 - http://www.w3.org/TR/CSS21/sample.html

只需添加margin:0;样式即可更正。

在应用自定义css之前，你应该使用某种css重置。这是解决问题的正确方法。

结帐Initializr。它提供了更多，包括IE6 +兼容性/后备等。

Answer 2

查看CSS的最后一行：

body, header, nav, section, footer {  border: 1px solid black; }

这是在所有这些元素周围添加1px边框。尝试从该行中删除身体。

Answer 3

只需使用body {margin: 0;}或body {margin: auto;}

即可

由于某种原因，我的网页被设置为5-10 px边框

3 个答案: