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 Youssef El Yahyaoui
Youssef El Yahyaoui
2,316 Points

List item space "issue"

Hi all,

I'm learning css, and i decided to make a little menu with list items, but i'm getting crazy with some spaces between each item, i spend two hours trying to fix this but without any result :(

if someone can take a look i will be nice, here is the code :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test page</title>
    <style>
    html{
        font-family: sans-serif;
    }
    body{
        margin:0;
        padding: 0 0;
    }
    a{
        color: black;
        background: red;
        text-decoration: none;
        display: inline-block;
        padding: 10px 10px;
    }
    a:hover{
        border-bottom: 3px solid black;
    }
    ul{
        margin:0;
        padding:0;
    }
    ul li{
        color: white;
        display: inline-block;
    }
    </style>
</head>
<body>
        <ul>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
        </ul>
</body>
</html>

Thanks a lot, for your help, and sorry for my bad english i usualy speak french :)

1 Answer

Nachiket Kumar
Nachiket Kumar
3,590 Points
Nachiket Kumar
Nachiket Kumar
3,590 Points

Hi Youssef,

In a case like this, it's helpful for others to be able to see what the problem is. You can use a free service like JSFiddle. I made a fiddle for you using your code (I split up your HTML and CSS), and you can see that I added 

ul li {
  float: left;
}

to make the spaces go away. I'm not sure why those spaces were there- you had made the margins 0. Perhaps someone else can answer that question.

Youssef El Yahyaoui
Youssef El Yahyaoui
2,316 Points

You're the MEN Kumar ! thanks a lot !!!. Infact, by removing the margins i was trying to remove the space between each item but with no effect, so as you said it will be very nice if someone can explain to us where these spaces came from.

Nachiket Kumar
Nachiket Kumar
3,590 Points
Nachiket Kumar
Nachiket Kumar
3,590 Points

Glad I could help. A simple search on google for "inline li has space" results in quite a few hits, and as usual, a post on CSS-tricks.com is the most comprehensive answer.

Youssef El Yahyaoui
Youssef El Yahyaoui
2,316 Points

Thanks again for your usefull help, I've read and understood the article on css-tricks.com. Since there are multiple solution to this "problem" i choosed to not close the <li> element since it's closing tags is known to be optional as mentioned in this article

Again, i'm very grateful to you !