Это довольно простой трюк, который будет очевидным для многих из вас. Но по какой-то причине, это решение всегда отчасти ускользнуло от меня, поэтому я может быть повторюсь и опушу его (хотя бы и для себя). Мне нравятся ссылки с фоновой подложкой и скругленными углами.
Напишем в 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; }Обратите внимание, что в демо применен класс, который использовать не рекомендуется. Это сделано в демонстрационных целях, так как хотелось показать решение проблемы с ссылкой-изображеним на одной демонстрационной странице.