CODEWITHSUNDEEP
htmlcsshtml-lists
llanato
llanato

Reputation: 2491

Unwanted spaces between LI's

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;
}

Upvotes: 1

Views: 128

Answers (3)

llanato
llanato

Reputation: 2491

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;
}

Upvotes: 1

skzryzg
skzryzg

Reputation: 1159

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

Upvotes: 1

tcmurphy
tcmurphy

Reputation: 239

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.

Upvotes: 0

Related Questions