Search code examples
jqueryhtmlslidetoggle

No gaps between divs

See jsfiddle here: http://jsfiddle.net/joe_young/ubgpseyt/

My problem is I don't want the gap between the whatFontHead and whatFont when it has slid in.

I am trying to change the font of a text area from a menu, using this menu (with 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>

The head bit which is displayed, and onclick the whatFont slideToggles

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

So onclick of whatFontHead, whatFont slides in, and this works. However, there is a gap between the two: http://jsfiddle.net/joe_young/ubgpseyt/

I have set their respective top and bottom margins to 0, and to -1px, and also changing all the margins to 0, but this doesn't fix it either.

I've also looked at this question: 'Gap between empty divs,' however my divs actually have content in them.

Solution

  • The gaps is caused by margin collapsing and actually is caused by margin in #whatFont child element. More information on this topic you will find here: https://stackoverflow.com/a/19719427/2416924

    Adding this should fix the problem:

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

    On your jsfiddle: http://jsfiddle.net/ubgpseyt/3/