title: How to get rid of white space between css horizontal list items?
body: <p>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?</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;     
  
  &lt;html&gt;
        &lt;head&gt;
          &lt;link type="text/css" rel="stylesheet" href="/stylesheets/test.css" /&gt;
        &lt;/head&gt;
  
        &lt;body&gt;
          &lt;div&gt;
            &lt;ul class="nav"&gt;
              &lt;li class="nav"&gt;&lt;a class="nav" href="#"&gt;One1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav"&gt;&lt;a class="nav" href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav"&gt;&lt;a class="nav" href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav"&gt;&lt;a class="nav" href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>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;
  }
  </code></pre>