Padding inside LI element

Question

I cannot get the padding property to work inside my <li> tag.

This is my CSS:

.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;
} 

Here is my .HTML:

   <ul class="menu">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Incentives</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Forum</a></li>
        <li class="last"><a href="#">Help</a></li>
    </ul>

Yet, the padding-top doesn't seem to affect the text inside the a and li tag.

What am I doing wrong?

Thanks.

Answer 1

You probably need to apply the padding to the a element. And you will need to make that a block-level element for the top/bottom padding to work:

.menu a { 
    color: #fff;
    display: inline-block;
    text-decoration: none;
    padding: 10px 15px 18px 15px;
} 

Note: inline-block is only partially supported in IE7 and below. You can use display: block; and float:left if the above does not work as expected.

Also important to mention that the base issue here is the display:inline on your lis in the CSS, and the fact that the a tag is inline by default. You cannot apply top/bottom padding to an inline element.