Question

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

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

任何想法我如何删除它？

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

谢谢

CODE：

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

CSS代码：

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;
    }

Answer 1

您删除了包装容器上的所有边距，但没有删除<p>和<h1>等相应内容。

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

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

Example Fiddle

Answer 2

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

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

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

超出主题，但header，footer和nav是否真的有效的HTML5元素名称？

html5元素之间的空格

2 个答案: