CSS inline padding behavior

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></l开发者_开发知识库i>
</ul>

CSS:

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

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

The width of a parent element may be defined, causing your a to push outside of the element. Try using Web Inspector or Firebug to see if the <ul>, <li> or other containing <div>s have a defined width.

Because li is an inline element. Try this out:

CSS

ul { list-style:none;text-align:right; }
ul li { display:block; }
ul li a { display:block;  margin:30px; }