Jump to content

Unwanted space between elements


jools

Recommended Posts

Hello all,

 

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

unwanted_space.jpg

 

 

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...