Padding inside LI element

css, html, padding

Solution

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 `li`s in the CSS, and the fact that the `a` tag is `inline` by default. You cannot apply top/bottom padding to an `inline` element.

Problem

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.

Original source