Исправление вылетов в ссылках-изображениях

Это довольно простой трюк, который будет очевидным для многих из вас. Но по какой-то причине, это решение всегда отчасти ускользнуло от меня, поэтому я может быть повторюсь и опушу его (хотя бы и для себя). Мне нравятся ссылки с фоновой подложкой и скругленными углами.

Напишем в CSS стиль ссылки:

a {
  padding: 2px 6px;
  background: #eee;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
Ссылка с подложкой
Так выглядит ссылка с подложкой

Проблема в том, что, когда вы делаете изображение в виде ссылки, эта подложка выпячивается наружу ровно на 6 пикселей (из-за свойства padding: 2px 6px;).

Неверный способ решения проблемы

Есть грубый способ исправить визуальный дефект. Чтобы удалить края подложки для изображений-ссылок — использовать jQuery.

$("a:has('img')").css(padding, 0);

Я сделал это потому в JQuery есть функция .has(), которая в состоянии увидеть, если элементы содержит еще один элемент. Это было бы здорово, если бы мы могли сделать это в CSS!

a:contains img { padding: 0; }

… но мы не можем. Другим способом можно было бы добавить класс на все ссылки, которые содержат изображения как класс = "ImageLink". У меня нет особых проблем с семантикой, но это может быть проблематичным в будущем для пользователей. Возможно, будущий дизайн сайта не будет использовать ссылки с подложкой, а все эти ссылки будут иметь лишний класс, засоряя нашу семантическую верстку.

Простое решение

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

a img { margin: 0 -6px; }

Демо

Обратите внимание, что в демо применен класс, который использовать не рекомендуется. Это сделано в демонстрационных целях, так как хотелось показать решение проблемы с ссылкой-изображеним на одной демонстрационной странице.


Понравилась статья? Поделиться с друзьями:
Перейти к верхней панели
Adblock detector