jools 0 Posted August 16, 2014 Report Share Posted August 16, 2014 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. Quote Link to post Share on other sites
davej 251 Posted August 16, 2014 Report Share Posted August 16, 2014 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;} Quote Link to post Share on other sites
dsonesuk 914 Posted August 16, 2014 Report Share Posted August 16, 2014 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. Quote Link to post Share on other sites
jools 0 Posted August 16, 2014 Author Report Share Posted August 16, 2014 Many thanks to both of you.Both of these worked perfectly. Quote Link to post Share on other sites
davej 251 Posted August 16, 2014 Report Share Posted August 16, 2014 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. Quote Link to post Share on other sites
dsonesuk 914 Posted August 16, 2014 Report Share Posted August 16, 2014 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. Quote Link to post Share on other sites
davej 251 Posted August 16, 2014 Report Share Posted August 16, 2014 So we say that float causes collapsing margins, but what else causes collapsing margins? Quote Link to post Share on other sites
Ingolme 1,020 Posted August 16, 2014 Report Share Posted August 16, 2014 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. Quote Link to post Share on other sites
dsonesuk 914 Posted August 16, 2014 Report Share Posted August 16, 2014 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.