No gaps between divs

Question

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.

Answer 1

Just add this css:

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

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

The issue is caused by <p> having a margin from the user agent default. On Chrome, <p> has:-webkit-margin-before: 1em;` by default

Answer 2

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/

Answer 3

Working Fiddle

Just add margin-top: 0 to #to-os

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

To overcome such issues i recommend to use normalize.css