jools Posted August 16, 2014 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. Link to comment Share on other sites More sharing options...
davej Posted August 16, 2014 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;} Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2014 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. Link to comment Share on other sites More sharing options...
jools Posted August 16, 2014 Author Share Posted August 16, 2014 Many thanks to both of you.Both of these worked perfectly. Link to comment Share on other sites More sharing options...
davej Posted August 16, 2014 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2014 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. Link to comment Share on other sites More sharing options...
davej Posted August 16, 2014 Share Posted August 16, 2014 So we say that float causes collapsing margins, but what else causes collapsing margins? Link to comment Share on other sites More sharing options...
Ingolme Posted August 16, 2014 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now