Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by simon buysse
simon buysse
9,716 Points

Can't find hidden margin

Hi there fellow treehousers,

I'm trying to make a navigation bar, where all buttons take up 25% of the width of my viewport. Somehow there's a margin in between my buttons, which prevents me from lining them up in 1 line. I thought about margin collapsing, but since all child elements have a margin and padding of 0, I don't think that's the problem. Here's a codepen to illustrate the problem:

http://codepen.io/anon/pen/jPEvmG

2 Answers

Zoltán Holik
Zoltán Holik
3,401 Points 
nav {
    margin: 0;
    padding: 0;  
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li{
    display: block;
    float: left;
    background-color: green;
    width: 25%;
    margin: 0;
    padding: 0;
}

nav ul li a {
    display: block;
    margin: 0;
    padding: 0;
    color: white
}
simon buysse
simon buysse
9,716 Points

Thanks Zoltan, that seems to work. So If I'm correct, the float property solved it and that implies there was still some margin collapsing?

Any idea where the margins came from?

Zoltán Holik
Zoltán Holik
3,401 Points

Yes! :) Inline-block is a whitespace dependent method and renders a 4px margin to the right of each element. in this case, better to use float:left with display:block property, or just float left instead of inline-block.

John Breslin
John Breslin
16,963 Points

Hey, good info. Thanks, Zoltan.

simon buysse
simon buysse
9,716 Points
simon buysse
simon buysse
9,716 Points

Perfect, thanks a lot :)