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

Question

I have this code:

<ul>
   <li><a>my link 1</a></li>
   <li><a>my link 2</a></li>
   <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?

Answer 1

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/

Answer 2

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