x
 
↑
Ноябрь
•
8 •

8 •

1 •
1 •
↓
Алексей Земляков
8 ноября 2012

Привет, хочу спросить совета по вёрстке.

У меня есть многострочные ссылки. Из-за большого интерлиньяжа между строк образуется «дыра», в кототорой ссылки перестают ховериться, уменьшать интерлиньяж нельзя.

Какой выход?

Алексей, спасибо за вопрос! Вы — очень хороший разработчик, раз вас волнуют такие вещи.

Уверен, многие верстальщики замечали этот эффект в своих проектах, но ничего не предпринимали, я — не исключение.

А решение очень простое — подобрать и добавить ссылкам верхний падинг:

a {
  padding-top: .3em;
}
Плохо Хорошо

Что нужно для признания иностранного гражданина высококвалифицированным специалистом

На 2013 год установлены величины минимального и максимального пособия по безработице

Что нужно для признания иностранного гражданина высококвалифицированным специалистом

На 2013 год установлены величины минимального и максимального пособия по безработице

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

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии
Андрей Ситник
8 ноября 2012

Либо ссылку в display:inline-block, а подчёркивание через вложенный span.
Дмитрий Шимкин
8 ноября 2012

А почему именно верхний падинг? Я обычно задаю что-то вроде padding:.2em 0, чтобы увеличить кликабельную зону равномерно снизу и сверху.
Вячеслав Пучкин
8 ноября 2012

При таком расположении ссылок также можно использовать display:block;
Это даже имеет преимущество: площадь ссылки становится прямоугольной, а значит, легче прицелиться.
Павел Масальский
8 ноября 2012

Артем, вы неправильно поняли вопрос. Заделать дыры надо не между ссылками, а между строками одной ссылки. Способ так же очень простой — display:block на проблемные ссылки и дырок не будет.

8 ноября 2012

Андрей, инлайн-блок разорвёт поток.

Придётся руками проверять, нет ли текста вокруг ссылки, чтобы использовать этот метод, тем же грешит и предложенный ниже display:block.

А для вложенного подчёркивания я предпочитаю u ;-)

8 ноября 2012

Дмитрий, нижний падинг можно использовать если ссылки не подчёркнуты или подчёркнуты через text-decoration:underline. C border-bottom будут проблемы — он уедет далеко от текста.

8 ноября 2012

Вячеслав, блочным ссылкам, конечно, не нужен падинг, я об этом написал. Но вы должны быть уверены, что эти ссылки всегда будут блочными и никакого текста вокруг не появится. Иначе будет так: http://jsfiddle.net/DbdmP/25/

Павел, кажется, вы не поняли ответ.
Сергей Марченко
2 июня 2016

Непонятно, почему inline-block разрывает поток? Ведь он снаружи должен вести себя, как обычный inline. Посмотрел MDN, не нашёл ответа.

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
Сайты для слабовидящих 2 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 •




Недавно всплыло

Какие законы для текста, который будет восприниматься только на слух? 1 • Экран ожидания в поликлинике 6 • 1 • Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 •