Jump to content

Unwanted space between elements


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...