0

好的，所以我尝试从头开始使用 css 构建这个 html5 网站，我努力消除所有元素之间的空格：页眉、导航、文章和页脚

他们都呆在那里。我知道这是一个非常基本的问题，但我已经花了一些时间在上面，但仍然无法弄清楚发生了什么。

任何想法如何删除它？

（如果您复制并保存这些文件，您会非常清楚地看到空间）

谢谢

代码：

<html>
<head>
    <meta charset="utf-8" />
    <title>My first website</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wraper">
    <header>
        <h1>Header</h1>
    </header>
    <nav>
        <ul>
            <li>
                Inicio
            </li>
            <li>
                Conceito
            </li>
            <li>
                Fotos
            </li>
            <li>
                Informações
            </li>
            <li>
                Contato
            </li>
        </ul>
    </nav>
    <article>
        <p>
            Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
            abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum 
            Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
            abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum 
            Lore ipsum Lore ipsum Lore ipsum Lore ipsum 
            abc Lore ipsum bdede Lore ipsum Lore ipsum Lore ipsum.
        </p>
    </article>
    <footer>
        <p>Rua B, Lote 16, Vila Dom Pedro I, Paraty</p>
    </footer>
</div>
</body>
</html>

代码：

body { 
    margin: 0;
    height: 100%;
    font-family: sans-serif;
    background-color: #F2E8BD;
}

.wraper {
    width: 960px;
    background-color: #CCC49F;
    margin-left: auto;
    margin-right: auto;
}

nav, header, footer {
    margin-top: 0;
    padding: 0;
    margin: 0;
}

nav ul{
    margin: 0;
    }

header{
    background-color: #F0F;
}   

nav{
    background-color: #08A;
}

nav li{
    display: inline;
}

article {
    background-color: yellow;
}

footer {
    margin: 0;
    background-color: red;
    }
4

2 回答 2

1

您消除了包装容器上的所有边距，但没有消除相应内容（如<p>和<h1>.

要删除所有空格，只需将以下内容（或类似内容）添加到 CSS 中：

h1 { margin: 0 }
p { margin: 0 }

示例小提琴

于 2013-07-25T14:15:27.450 回答
0

如果您通过浏览器的调试工具浏览生成的 HTML 文件，您会看到它们具有边距 CSS 值。例如，标头21px在 Safari 上具有顶部和底部。

更改您的 CSS 以删除此填充 - 例如，对于标题：

header, header h1 {
    background-color: #F0F;
    margin: 0
}

题外话了，但是header真的是有效footer的navHTML5 元素名称吗？

于 2013-07-25T14:14:50.243 回答