title: Padding in <li>
body: <p>see jsFiddle example <a href="http://jsfiddle.net/hKs3e/" rel="nofollow">here</a></p>
  
  <p>I'm applying <code>padding-top</code> to an <code>li</code> to try to align the text nearer to the bottom. But it's just making the <code>li</code> bigger, even though there seems plenty of room to fit the text.</p>
  
  <p>Any ideas?</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="padded"&gt;x&lt;/li&gt;
      &lt;li&gt;x&lt;/li&gt;
  &lt;/ul&gt;​
  
  li {
          width: 25px;
          height: 25px;
          border: solid 1px black;
          display: inline;
          margin: 0 2px 0 0;
          float: left;
  }
  
  .padded {
      padding: 3px 0 0 0;
      text-align: center;
  }
  </code></pre>
  
  <p>I get the same results in IE7 and Chrome, not checked any other browser.</p>