title: HTML/CSS - Remove spaces from line breaks in code for LI
body: <p>Hey,
  Is there a way to get browsers to ignore line breaks in the source?</p>
  
  <pre><code>&lt;div id="navbar"&gt;
      &lt;div id="navbar-container"&gt;
          &lt;ul&gt;
              &lt;li&gt;HOME&lt;/li&gt;
              &lt;li&gt;TUTORIALS&lt;/li&gt;
              &lt;li&gt;BLOG&lt;/li&gt;
              &lt;li&gt;FORUMS&lt;/li&gt;
              &lt;li&gt;LINKS&lt;/li&gt;
              &lt;li&gt;&amp;nbsp;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  #navbar {
      background:#FFF;
      width:940px;
      margin:auto;
      border-radius: 10px 10px;
      -webkit-box-shadow: 5px 5px 10px #888;
  }
  #navbar-container {
      margin:auto;
  }
  #navbar-container ul {
      list-style:none;
      text-align:center;
      display:block;
      width:auto;
      padding:0;
      margin:0;
  }
  #navbar-container li{
      list-style:none;
      border-left:3px solid black;
      display:inline-block;
      font-family:"Arial", sans-serif;
      font-size:2em;
      padding:0 7px 0 10px;
      margin:0;
      white-space:nowrap;
  }
  #navbar-container li:hover{
      color:#FFF;
      background:#000;
      border-left:3px solid black;
      display:inline-block;
      font-family:"Arial", sans-serif;
      font-size:2em;
      margin:0;
      padding:0 7px 0 10px;
  }
  </code></pre>
  
  <p>It's placing a small space between each LI, I've set it up so then line up horizontally,
  i could just remove the line breaks in the source, but id prefer not to.</p>