1

Необходимо уменьшить высоту линии в строке. У меня получается только так (слева как надо, справа мое):

alt text

Т.е. высота перестает уменьшаться при 16px. Все что меньше не влияет на текст.

HTML

<a href="#" class="article-title small">Теперь новая некая услуга переведена в электронный вид</a>

CSS (все что влияет на отображение ссылки)

.small {
    font-size: 10px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

*[class*="title"].small {
    font-size: 10px;
    text-transform: uppercase;
}

.short-article-list li .article-title {
    color: #787878;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 100;
    line-height: 27px;
    margin: 0px 0;
}

.short-article-list.another-view li a {
    line-height: 12px;
}
1
  • 1
    мне кажется эти размеры зависят от doctype. у меня используется <!DOCTYPE html>, а если использовать переходный то все ок <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd"> 6 июл 2013 в 13:06

2 ответа 2

2

Я, наверное, не совсем понял что вам нужно, но междустрочный интервал можно изменять относительно исходной ширины в процентах (1% = 0.01), то есть:

.short-article-list.another-view li a {
    line-height: 0.5;
}
8
  • такое не работает, пробовал разные единицы измерения. все что меньше 100% или меньше 1 или меньше 16px не работает 6 июл 2013 в 12:06
  • 1
    cssdeck.com/labs/d6bfywxk пришлите код списка, видимо что-то с ним не то, а лучше рабочий кусок, чтобы можно было вставить и посмотреть своими глазами, так всем будет легче помочь вам.
    – Pifagorych
    6 июл 2013 в 12:14
  • еще вопрос по шрифту. почему то в фотошопе и на странице один и тот же шрифт отображается с разными отступами между букв. в результате размеры не сходятся с макетом (пробовал уменьшить межбуквенный интервал, ничего хорошего не вышло, т.е. получается намного меньше макетного). это вообще реально сверстать пиксель в пиксель с макетом или допускаются такие погрешности с шрифтами? 6 июл 2013 в 12:39
  • cssdeck.com/labs/full/7wvqb3zg
    – Pifagorych
    6 июл 2013 в 12:44
2

Чтобы настало счастье сделайте ссылку блочным элементом.

.short-article-list.another-view li a {
    line-height: 13px;
    display: block;
}

Ну а сверху уж сами отодвинете. http://cssdeck.com/labs/b6qbxfkt

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.