Question

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

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

我正在尝试使用此菜单（使用CSS＆amp; 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>

显示的头位，然后点击whatFont slideToggle s

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

onclick whatFontHead,的{{1}}幻灯片放入，这是有效的。但是，两者之间存在差距：http://jsfiddle.net/joe_young/ubgpseyt/

我已将各自的上边距和下边距设置为whatFont，0，并将所有边距更改为-1px，但这不是也解决了。

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

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子元素中的边距引起的。有关此主题的更多信息，请访问：https://stackoverflow.com/a/19719427/2416924

添加它可以解决问题：

#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之间没有差距

3 个答案: