How to get rid of white space between css horizontal list items?

Question

I've got the following test page and css. When displayed, there is a 4px gap between each list item. How do I get the items to be next to each other?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">     

<html>
      <head>
        <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
      </head>

      <body>
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">One1</a></li>
            <li class="nav"><a class="nav" href="#">Two</a></li>
            <li class="nav"><a class="nav" href="#">Three</a></li>
            <li class="nav"><a class="nav" href="#">Four</a></li>
          </ul>
        </div>
      </body>
    </html>

The css:

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}

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

45

You need to use display:block and float:left on the lis to remove the space. When they're inline the browser treats them as words, and so leaves space in between.

Also see my similar question.

edited May 23 '17 at 12:00

Community

1
1

answered Jun 15 '10 at 08:48

Skilldrick

69,215
34
177
229

David Perlman · Answer 2 · 2011-11-08T09:05:35.067

17

Combine @Skilldrick and @teedyay and you have your answer and explanation.
If <li>s are treated as words than any white space around them is condensed to one space.

So I guess this is a feature that looks like a bug.

To remove the space either put all your <li>s in a chain with no white space between them.
OR
Reduce the font size on the <ul> to 0 and restore the size on the <li>s

edited Nov 08 '11 at 09:05

answered Jun 15 '10 at 11:01

David Perlman

1,460
1
12
32

1

reducing the font size and restoring it did the trick for me, thanks – manitu Jan 28 '12 at 16:46
1

I know this question is a little old but there is one more alternative - putting `` before each `
`. Note that I didn't say it was a good solution! It has become my preferred method compared to the above alternatives, however.

ClarkeyBoy

Jun 16 '13 at 19:58

float left also works, but came with undesired side effects for me. Font size zero did the trick. thanks – nest Nov 19 '14 at 08:13

score 12 · Answer 3 · edited Nov 08 '11 at 13:16

12

You can also set font-size:0 for the <ul> tag.

edited Nov 08 '11 at 13:16

apaderno

28,547
16
75
90

answered Nov 08 '11 at 08:56

killebytes

940
1
10
24

sorry, didnt entirely read @David answers. – killebytes Nov 08 '11 at 08:57
2

was the better solution for me – wutzebaer Sep 30 '13 at 10:51
What about the browser support? i have read somewhere that it doesn't work in IE <= 7 – Asad Ullah May 12 '14 at 03:24
this is the best solution for me....thanks.... `float:left;` also working...but it doesn't work if i want to make `white-space:nowrap` but `font-size:0;` solved my problem. – Syamsoul Azrien Nov 13 '19 at 03:07

score 6 · Answer 4 · answered Jun 15 '10 at 09:07

I'm afraid this is dirty too, but I'll be (pleasantly) surprised if there's a clean fix to this.

Put all your <li>s on one line:

<li class="nav"><a class="nav" href="#">One1</a></li><li class="nav"><a class="nav" href="#">Two</a></li><li class="nav"><a class="nav" href="#">Three</a></li><li class="nav"><a class="nav" href="#">Four</a></li>

Sorry.

How to get rid of white space between css horizontal list items?

4 Answers4

Linked