CSS inline behavior

For some reason, adding an anchor tag leaves the parent

. When adding a display: the lock no longer overflows. The same thing happens with fields instead of filling. Why is padding ignored when sizing?

HTML:

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

CSS

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

There should be no problem with padding-leftor padding-right. But vertical padding will not work on an inline element such as <a />.

+2
source

The width of the parent element can be determined, forcing you to push outside the element. Try using the Web Inspector or Firebug to determine if they have <ul>, <li>or others that contain, a <div>specific width.

0
source

Since li is an inline element. Try it:

CSS

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

All Articles