Unwanted space between elements

[jools]

Hello all,

 

I'm struggling to get rid of a white space between two divs:

 

 

I have a nav element between a div element called lower footer. They are displayed in the html as...

<nav><ul><li><a href="#">Meet Your Sensei</a></li><li><a href="#">Tour Our Dojo</a></li><li><a href="#">Our Martial Arts Program</a></li><li><a href="#">Our Training Schedule</a></li><li><a href="#">Current Events</a></li><li><a href="#">FAQ</a></li><li><a href="#">Contact Us</a></li></ul></nav><div id ="lowerfooter"><p>text here</p><img src="facebook_icon.png"><img src="facebook_icon.png"></div>

The CSS for lower footer and the nav are:

 #lowerfooter    {    height: 200px;    padding-top: 0;    margin-top: 0;    background-color: #F60;    padding-left: 160px;    font-family: Verdana, Geneva, sans-serif;    font-size:60%;        }   

  nav {    height:30px;    font-family: Meiryo;    background-color: #F96;    color: #000;    border: thin solid #F60;    vertical-align: middle;    text-align: center;    margin-top: 0px;    margin-bottom: 0px;    padding-top: 0px;    padding-bottom: 0px;    /*margin-bottom: 0px;    margin-top: 0px;    padding-top: 0px;    padding-bottom:0px;*/        }         nav * {font-size:0;} /*remove spacing produced by display: inline-block; between li */

I have tried to set upper and lower margins and padding to 0px but it doesn't seem to remove the white space.Thanks.

 

[davej]

The problem is the default margin on <p>

 

If you want better control over the defaults you can begin your styling with...

*{margin:0;padding:0;}

[dsonesuk]

The problem is collapsing margins, the paragraph margin seeps beyond the top edge of the parent container element, to fix use overflow: hidden; on the container element.

[jools]

Many thanks to both of you.Both of these worked perfectly.

[davej]

overflow:hidden is a common fix when using float, but I did not realize that overflow:hidden could have such a useful effect even when not using float.

[dsonesuk]

When you use universal reset, you would have to reset paragraph margin again anyway, as all paragraphed text would show as one block of text anyway, so the problem will remain unless you target #lowerfooter paragraph specifically and remove its top margin.

 

Padding or border will also prevent collapsing margins, but these can be visible alterations to layout, whereas overflow: hidden is invisible.

[davej]

So we say that float causes collapsing margins, but what else causes collapsing margins?

[Ingolme]

Margins collapse natually as long as there is no border or padding to stop them, regardless of whether the element is foating or not. I'm still not entirely sure why things were designed this way because I've never seen an advantage to it.

[dsonesuk]

No child margins seeping beyond edge of parent whose margin is less than the child is known as collapsing margins. The overflow: hidden; on parent of floated child element help the parent detect the boundaries of floated elements and totally envelope them.