div之间没有间隙

Question

在此处查看 jsfiddle：http://jsfiddle.net/joe_young/ubgpseyt/

我的问题是我不希望 whatFontHead 和 whatFont 之间的间隙滑入。

我正在尝试使用此菜单（使用 CSS & jQuery）从菜单更改文本区域的字体：

<h1>Choose a font</h1>

<div id="whatFontHead">Change Font</div>
<div id="whatFont">
    <p id="to-os">Open Sans</p>
    <p id="to-vd">Verdana</p>
    <p id="to-sl">Slabo</p>
    <p id="to-cg">Courgette</p>
</div>

显示的头位，点击whatFontslideToggles

<div id="whatFont">
    <p id="to-os">Open Sans</p>
    <p id="to-vd">Verdana</p>
    <p id="to-sl">Slabo</p>
    <p id="to-cg">Courgette</p>
</div>

因此 whatFontHead, whatFont 的 onclick 滑入，这有效。但是，两者之间是有差距的：http://jsfiddle.net/joe_young/ubgpseyt/

我已将它们各自的顶部和底部边距设置为 0 和 -1px，并将所有的边距更改为 0，但这也不能解决问题。

我也看过这个问题：'Gap between empty divs，但是我的 divs 实际上有内容。

Answer 1

只需添加此 css:

#whatFont p:first-child {
    margin-top: 0;
    padding-top: 15px;
}

http://jsfiddle.net/ubgpseyt/5/

此问题是由于 <p> 与用户代理默认设置有一定差距引起的。在 Chrome、<p> has:-webkit-margin-before: 1em;` 默认情况下

Answer 2

间隙是由边距折叠引起的，实际上是由 #whatFont 子元素中的边距引起的。您可以在此处找到有关此主题的更多信息：

添加这个应该可以解决问题：

#whatFont :first-child {
    margin-top:0;
}

在你的 jsfiddle 上：http://jsfiddle.net/ubgpseyt/3/

Answer 3

Working Fiddle

只需将 margin-top: 0 添加到 #to-os

#to-os {
 margin-top: 0;
}

为了克服这些问题，我建议使用 normalize.css

div之间没有间隙

No gaps between divs

html

jquery

slidetoggle