CSS inline padding behavior

Question

For some reason padding on an anchor tag overflows out of the parent <li></li>. When adding display:block it no longer overflows. The same happens with margins instead of padding. Why is the padding ignored when sizing <li></li>?

HTML:

<ul>
<li><a href="">Link</a></li>
</ul>

CSS:

ul{list-style:none;text-align:right;}
ul a{padding:3px;}

Answer 1

There shouldn't be an issue with padding-left or padding-right. But vertical padding won't work on inline element like <a />.