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

Question

H3LLO,

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

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

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

Есть идеи, как избавиться от дополнительного нижнего отступа a элемента?

Спасибо
Адам

Answer 1

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

Answer 2

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

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

Answer 3

Я сделал как

 #my-container {
    margin-bottom: -4px;
}

больше решений здесь

Answer 4

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