Праздник на носу и оставлять что‑то недосказанным в уходящем году совершенно не хочется. В одном из предыдущих постов я начал выяснять как убрать подчеркивание (основанное на свойстве border) для ссылки, содержащей рисунок.
Помимо прочего, при использовании описанного метода придется держать в голове, что контент (текст), следующий за таким рисунком будет подниматься к нему на величину указанного отрицательного нижнего поля. Пусть это может не бросаться в глаза, но все же.
Пораскинув мозгами, обнаружил более своевременное решение, основанное на вертикальном выравнивании. Для рисунка расположенного внутри ссылки, в стилях достаточно указать
a img {vertical‑align: middle;}
Как видите, Firebug четко показывает, где теперь расположена область содержимого ссылки вместе с нижней рамкой. Такое поведение характерно для всех современных браузеров. Конечно, «былинные герои» верстальщиков опять в пролете. Для последних придется указывать {height:1 %;} контейнеру, в котором находится ссылка с картинкой. Хорошо, если это будет параграф <p>, как в примере. Маленькое условие — размер изображения не должен быть ниже, чем высота ссылки, в которой он расположен; в противном случае рамка будет видна.
Вот еще какая мысль посетила во время написания материала — достаточно ли будет будет курсора‑указателя, чтобы пользователь однозначно понял, что данный рисунок есть ссылка? Может, посетителю сайта нужно немножко подсказать: дополнительная надпись «кликабельно», рамка по контуру изображения с полями… Выскажитесь, не стесняйтесь.
А если попробовать убрать подчеркивание вот таким образом:
a img{
border: none;
text-decoration: none;
}