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

Viewed 13305

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?

3 Answers
Related