title: Evenly distributing or spacing list items vertically
body: <p>I've searched everywhere, but the suggestions aren't doing what I'm looking for. Basically, I have my list inside a ul. The ul's height has been set to an exact size. I want the list items inside to have an equal spacing in relation to each other, <em>as well as</em> in relation to the top and bottom of the ul container (that's where the height comes in)—so the spaces are all the same size. How do you do this?</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="index.html" id="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>