CODEWITHSUNDEEP
htmlcsspadding
oliverbj
oliverbj

Reputation: 6052

Padding inside LI element

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.

Upvotes: 5

Views: 25620

Answers (7)

user8617716
user8617716

Reputation:

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>

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

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.

Upvotes: 18

davepmiller
davepmiller

Reputation: 2708

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

.menu {padding-top: 10px;}

Upvotes: 0

Andres Morales
Andres Morales

Reputation: 155

You might be able to give you li a class name and try your styling for that class.

Upvotes: 0

Bogdan
Bogdan

Reputation: 44526

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/

Upvotes: 1

Chris Frank
Chris Frank

Reputation: 4452

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

Upvotes: 0

LorDex
LorDex

Reputation: 2636

padding won't work for 

display: inline;

try 

display: block;

instead, and optionally 

float: left;

Upvotes: 5

Related Questions