html - 如何消除两个部分之间的差距(一个在另一个之上)？

Question

我有两个部分(标题部分和主体部分)，无论出于何种原因，都会有这么大的差距。我已经尝试了很多事情，例如将填充设置为 0，将边距设置为 0 等，但似乎没有任何事情可以完成。请帮忙! http://jsfiddle.net/Pfc2Z/2/

这是相关的 HTML

    <section class="header">
        <section class="logo">
            <img src="logo.png" height="100px" width="200px" alt="Img Not Available">
        </section>
        <section class="link">
            <nav>
                <ul>
                    <li>    
                        <a href="#"><span>Home</span></a>
                    </li>
                </ul>
            </nav>
        </section>
    </section>
    <section class="main">
        <p>Hello World</p>
    </section>

这是CSS

html, body {
margin:0;
padding:0;
background-color:#46a7bb;
}
.header {
    background-color:#313145;
}
.logo {
    padding-left:20%;
}
.logo, .link {
    display:inline-block; 
}
nav ul {
    list-style:none;
    padding:0;
    margin:0;
}
.main {
    background-color:white;
    width:60%;
    margin:0 auto;
}

Answer 1

那是因为您的主要部分包含段落标记。段落标签有自己的默认样式(读取边距和填充)。如果你删除它，你会没事的。只需将以下内容添加到您的 CSS 类中:

p {
    margin:0;
    padding: 0;
}

在这里查看:http://jsfiddle.net/y9deH/1/

更新:

是的，这是可能的。您可以通过使用 class 选择器 或 id 选择器 来做到这一点。 类选择器 将允许您在需要时再次使用这种样式(可重用性)，同时不会更改默认的段落样式。

另一方面，

ID 选择器 将仅应用于此段落。

请参阅此处的 class 选择器示例:http://jsfiddle.net/y9deH/2/

请参阅此处的 id 选择器示例:http://jsfiddle.net/y9deH/3/

希望这有帮助!!!