title: Padding inside LI element
body: <p>I cannot get the padding property to work inside my <code>&lt;li&gt;</code> tag.</p>
  
  <p><strong>This is my CSS:</strong></p>
  
  <pre><code>.menu li{
     height:50px;
     display: inline;
     padding:10px 15px 18px 15px;
     border-style: solid;
     border-width: 0px 2px;
     -moz-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
     -webkit-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
     -o-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
     border-image: url(../img/menuborder.png) 0 2 stretch repeat;
     border-right:0;
  }
  
  .menu a{
     color:#fff;
     text-decoration: none;
     padding-top:10px;
  } 
  </code></pre>
  
  <p><strong>Here is my .HTML:</strong></p>
  
  <pre><code>   &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Incentives&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Yet, the padding-top doesn't seem to affect the text inside the a and li tag.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks.</p>