padding for <a> inside <li> pushes through the top of edge of <li>

I have this code:

<ul>
   <li><a>my link 1</a></li>
   <li><a>my link 2</a></l开发者_StackOverflow中文版i>
   <li><a>my link 3</a></li>
</ul>

When I apply padding to <a> like so:

ul {
  list-style: none;
  margin: 30px 0 0 2.6em;
}
ul li {
  height: 41px;
  width: 196px;
  background: url(images/image.png) no-repeat; 
  position: relative;
}
ul li a {
  padding-top: 5px;
}

The padding works but it collapses and goes through the top edge of <li> instead of pushing the <a> down. How ca I resolve this?

you should give your "a" display:inline-block

anchors are "inline" by default and won't show padding properly.

jsFiddler demo: http://jsfiddle.net/PqajF/3/

ul li a
{
    padding-top: 5px;
    display: inline-block;
}

You need to omit a

See http://jsfiddle.net/nPXyN/

<span>padding</span>
<ul id="paded">
    <li><a>my link 1</a></li>
    <li><a>my link 2</a></li>
    <li><a>my link 3</a></li>
</ul>
<span>margin</span>
<ul id="margined">
    <li><a>my link 1</a></li>
    <li><a>my link 2</a></li>
    <li><a>my link 3</a></li>
</ul>



ul#paded li {
    padding-top: 5px;
    border: 1px solid black;
}

ul#margined li {
    margin-top: 5px;
    border: 1px solid black;
}