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

Answer 2

padding won't work for

display: inline;

try

display: block;

instead, and optionally

float: left;

Answer 3

You could also try setting line-height for the a to match the height of the li like so:

.menu a{
    color: #000;
    text-decoration: none;
    line-height: 50px;
}

Demo here: http://jsfiddle.net/9TcRP/

Answer 4

.menu li a{color:#fff;text-decoration: none;padding-top:10px;}

This will add padding to the list items themselves. You will need to give styling to the

.menu

itself in order to add all the other padding (left right) to the block of list items.

Answer 5

您也许可以给您 li 一个班级名称并尝试为该班级设置样式。

Answer 6

You want the top padding on the menu itself. Not the anchor or list element.

.menu {padding-top: 10px;}

Answer 7

This is working for me:

CSS

.menu li{
  padding:7px;
}

HTML

<div class="menu">
  <ul>
    <li>first element
    <li>second element
    <li>third element
    <li>fourth element
  </ul>
</div>