Как получилось 4px дополнительного дополнения, появляющегося под моим элементом <a>?

H3LLO,

По какой-то причине есть 4px дополнительных дополнений, появляющихся под элементом a. Я вижу этот манифест как в Firefox, так и в Chrome. Я помню это явление на Flickr в его ранние дни, кроме того, что это был синий бар, который появился под обернутыми элементами.

Вот ссылка на код примера, которая иллюстрирует мою проблему. Фон: a окрашен в красный цвет, а граница: img окрашена в серый цвет. Как вы можете видеть, элемент a распространяется примерно на 4 пикселя ниже img.

Чтобы увидеть код, просто нажмите ссылку Изменить, используя JSBIN ", которая появляется в верхнем правом углу, когда вы наводите курсор на окно.

Любые идеи о том, как избавиться от добавления дополнительного дна a?

Спасибо
Адам

Ответы

a {display: inline-block}
img {display: block}