Unwanted spaces between LI's

Question

I have a UL with LI's creating the main navigation on a website, what is happening is that there is a space between each LI which I can't find any cause for this space/gap, I'm aware of the area between closing and opening LI's issue and I've already tried changing the LI's to </li><li> for each list item with no success.

I've searched through stack already and none of the LI spacing questions have solved my issue.

This is occurring on Firefox amoung other browsers which is a bit odd as I'm only really used to only seeing LI layout issues on IE browsers, namely earlier versions.

I've outlined the code I'm using below, any help or advice is greatly appreciated.

HTML:

<ul class="nav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

CSS:

ul.nav {
    height: 40px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    background: #555555;
}
ul.nav li {
    color: #FFFFFF;
    display: inline;
}
ul.nav li a {
    padding: 8px 10px 8px 10px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}
ul.nav li a:hover {
    background: #660000;
    text-decoration: none;
}

See: http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements — Josh Crozier, Sep 01 '14 at 21:50
The problem should really be solvable with the answer posted by Josh Crozier. If not, please provide a jsfiddle with a setup of your problem (and preferably also with an attempt to solve it with one of the possibilities outlined in the answer posted by Josh). — Hauke P., Sep 01 '14 at 21:53
If it's a vertical space you probably want to set the line-height to something like 1em in your ul.nav li {} directive — splig, Sep 01 '14 at 21:54
@JoshCrozier, fair play, I gave them all a shot and the only one that works for me is setting the font-size to 0 on the UL tag. — llanato, Sep 01 '14 at 21:58

score 1 · Accepted Answer · edited May 23 '17 at 12:12

After much playing around with the different methods suggested to fix whitespace issues with HTML tags, Why is there an unexplainable gap between these inline-block div elements? was the only topic that could help, it goes into much detail about the whitespace issue using DIV tags, for the fix using UL/LI's I found below the only solution in my instance.

None of the method one options worked in this instance, the only one that would work was method two 'Reset the font-size', to add font-size: 0; to the UL.

ul.nav {
    height: 40px;
    margin: 0px;
    padding: 0px;
    font-size: 0;
    list-style: none;
    background: #555555;
}

score 0 · Answer 2 · answered Sep 01 '14 at 21:59

The spacing/line breaks do make a difference, check out the difference between the li's here:

http://jsfiddle.net/33mc9mja/

<ul class="nav"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li></ul>

should do the trick.

score 0 · Answer 3 · answered Sep 01 '14 at 22:01

The gap is there because as inline elements, the LI's have a certain size defined by their font-size. To get rid of the gap, set the font-size of the UL to 0 while leaving the font-size for the li>a at 18px.

jsfiddle: http://jsfiddle.net/whg8qo9f/2/

ul.nav {
    height: 40px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    background: #555555;
    font-size:0
}

edit: keep in mind that is will be relevant for any inline-block elements

Unwanted spaces between LI's

3 Answers3