Пробел в нижней части метки привязки

У меня есть ярлык, окружающий изображение. У меня есть граница, установленная на div, в которой находится тег. У меня есть как margin, так и padding, равный 0, но по какой-то причине мой тег все еще на 3 пикселя выше моего изображения. Это оставляет немного пространства между изображением и границей, что разрушает внешний вид, который я хочу выполнить.Пробел в нижней части метки привязки

Что я делаю неправильно? Я тестировал как в FireFox, так и в Chrome с теми же результатами. Thanks

источник

2010-07-07 Icode4food

Изображение display: inline поэтому оно рассматривается как персонаж и находится на базовой линии. Разрыв вызван пространством, предусмотренным для descender (которое вы найдете на таких же буквах, как j, g, y и p).

Отрегулируйте vertical-align с помощью CSS: img{vertical-align: bottom}

источник

2010-07-07 18:13:55 Quentin

+10

В частности, 'img {vertical-align: bottom}' –

Это именно то, что происходит. Проблема решена, если я выполняю 'vertical-align: bottom;' или 'display: block;'. Какое лучшее решение? – Icode4food

Ничего не лучше, у них просто разные последствия. Элементы блока имеют разрыв линии вокруг них и другие забавные побочные эффекты. – Quentin

display:block для этого достаточно, если элемент не имеет братьев и сестер.

источник

2010-07-07 18:20:10

Интересно, поэтому настоящим виновником является тег изображения, а не тег . – Icode4food

Вот что Дэвид в значительной степени сказал, что любой встроенный элемент будет иметь место для descenders. Это естественное поведение. –

«вертикальное выравнивание: нижнее» и «дисплей: блок» удаляют «лишнее свободное пространство» внизу – aztack

Пробел в нижней части метки привязки

ответ

Смежные вопросы