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 selectors或id selectors来完成此操作。只要你想要使用它（重新使用）而不改变默认的段落样式，Class selectors将允许你再次使用这种样式。

另一方面，

ID selectors仅适用于此段。

请在此处查看class选择器示例：http://jsfiddle.net/y9deH/2/

请在此处查看id选择器示例：http://jsfiddle.net/y9deH/3/

希望这有帮助!!!

Answer 2

布局没有任何问题，它们没有任何边距或填充问题。问题在于<p>Hello World</p>段。它有一个默认的保证金。您可以通过将其默认边距删除为0或使用填充将其删除来解决此问题，但不应该覆盖默认的段落样式 使用填充到父级< / EM> 即可。这是链接，我使用（20px填充到主要部分）。谢谢

http://jsfiddle.net/fyfWq/

Answer 3

万一有人来到这里寻找一个他们无法解释的恼人的差距，他们已经完成了所有通常的保证金，填充和边界检查：

如果您已经创建了元素inline-block，那么浏览器将在元素之间呈现空格，无论在那里定义什么字体大小。我选择通过添加负边距来解决这个问题，但你也可以通过删除html中的空格来解决它（通过注释掉它，或者......等待它......使用你的删除/退格按钮）。

我来这里寻找这个问题的答案，所以希望它可以帮助其他人。

更新：重新审视上面的问题，我在那里看到一个内联块，所以也许这实际上是问题！

如何消除两个部分之间的差距（一个在另一个之上）？

3 个答案: