CSS размер шрифта, заставляющий последнюю строку быть слишком высокой

Question

ОК, у меня есть список (<ul>), тогда внутри каждого элемента <li> у меня есть <a...>

Вот все применимые элементы CSS для тега <a>

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

Все выглядело великолепно, пока я не поместил туда шрифт размером 11 пикселей. Проблема в том, что гиперссылки переносятся на несколько строк в списке (что нормально). Но когда я уменьшаю размер шрифта, последняя строка гиперссылки всегда имеет больший разрыв между ней и строкой над ней, чем другие строки. Все остальные строки выглядят хорошо, но последняя строка выглядит так, как будто она разделена на 1,5 или около того. Я настроил свойство line-height, но всегда последняя строка больше остальных.

Если вам нужна демонстрация, чтобы посмотреть, что я имею в виду, я могу это устроить, когда вернусь домой.

вот какой-то 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

Конечно, это должно быть в довольно узком контейнере (мой - 150px, если я помню)

Answer 1

Размер шрифта / высота строки родителя (<li>) применяется к последней строке (<a>, поскольку стиль отображения <a> по умолчанию встроенный.)

Настройка стиля display для <a> для блокировки работает для меня.

.search_area li a {
  font-size: 11px;
  display: block;
}

Answer 2

Это из-за высоты строки . Высота строки обычно рассчитывается на основе всех символов в строке. 1-я строка имеет большую высоту строки, а 2-я строка имеет меньшую высоту строки, где она переносится. Возможно, вам придется указать фиксированную высоту строки вашей ссылки:

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

В качестве альтернативы вы можете поместить символ после вашей гиперссылки, чтобы при переносе во 2-ю строку получалась высота строки символов вне гиперссылки. Как то так:

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

Редактировать из OP: Этот ответ заставил меня попробовать следующее, что сработало отлично:

Я добавил следующее в свой CSS:

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

Хотя в li нет текста, за пределами гиперссылки, высота строки li все еще меня портит. Избавившись от этого, гиперссылка позволяет определить интервал.