CSS font-size causing the last line to be too high

Question

OK, I have a list (<ul>) then inside each <li> element I have an <a...>

Here are all the applicable CSS items to the <a> tag

.search_area li a {
  font-size:11px;
}
sResCntr li {
  list-style-type:none;
}
body {
  font-family:Arial;
}

Everything looked great, until I put that font-size:11px in there. The problem is that the hyperlinks wrap to multiple lines within the list (which is fine). But when I decrease the font-size, the last line of the hyperlink always has a larger gap between it and the line above it than the other lines. All the other lines look good, but the last line looks like it is 1.5 spaced or something. I have adjusted the line-height property, but always the last line is larger than the rest.

If you need a demo to look at to see what I mean, I can arrange it when I get home.

here is some HTML:

<ul class="sResCntr">
  <li>
    <a id="blah" value="6048" href="blah blah"> This is some text that is really long.  In fact so long it goes to multiple lines.
    </a>
  </li>
  <li class="alt">
    <a id="blah 2" value="5946" href="blah blah"> some more super long text which will wrap to multiple lines.  In fact, hopefully, so long that it wraps to at least 3 lines in whatever container you put it
    </a>
  </li>
</ul

Of course, that has to be in a container which is fairly narrow (mine is 150px if I remember)

Answer 1

That's because of the line height. The line height is normally calculated based on all the characters on the line. The 1st line has the larger line height and the 2nd line has the smaller line height where it wraps. You might have to specify a fixed line height your link:

.search_area li a {
  font-size:11px;
  line-height:14px; /* matching the other lines */
}

Alternatively you could put a character after your hyperlink so when it wraps the 2nd line will get the line height of the characters outside the hyperlink. Something like this:

<li>Some Text <a href='#'>Your Link</a>&nbsp;</li>

Edit from OP: This answer led me to try the following which worked perfectly:

I added the following to my CSS:

.search_area li
{
    line-height:0px;
    padding:5px;
    background-color:#F3F3F3;
}

While there is no text in the li, outside of the hyperlink, the line-height of the li, was still messing me up. By getting rid of it, the hyperlink is allowed to determine the spacing.