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

H3LLO,

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

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

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

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

Спасибо
Адам

Ответ 1

добавьте vertical-align:bottom; в свои свойства img css.

Ответ 2

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

Изображения отображаются встроенными по умолчанию, и вам нужно добавить display: block или vertical-align: bottom, чтобы устранить проблему.

Ответ 3

Я не уверен, почему это происходит, но вы можете попробовать YUI Reset, чтобы исправить его.