тег занимает дополнительное место в html

Question

Я поместил изображение внутри тега.но когда я дал границу изображению и метке.Тег A занимает дополнительное место.оно не окружает изображение. как преодолеть лишнее пространство с помощью тега «a».я указываю метку красной линией.

Мой HTML:

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a>

Css:

img
{
    border:1px solid black;
}
a
{
    border:1px solid red;
}

http://jsfiddle.net/rEPXY/2/

Answer 1

Это то, что вы ищете?

a
{
    border:1px solid red; display:inline-block; line-height:0;
}

Answer 2

В зависимости от того, как это изображение будет размещено на вашем веб-сайте, вы можете исправить это, поместив теги <a> и <img>. См. Пересмотренный jsfiddle для примера:

Html:

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a>

Css:

img {
    border:1px solid black;
    float: left;
}

a {
    border:1px solid red;
    float: left;
}

www.jsfiddle.net / rEPXY / 9

Answer 3

Согласно этому , вы можете решить эту проблему, добавив следующее правило:

a img {vertical-align:bottom}

Это, похоже, сработало для меня в вашем jsfiddle.

Answer 4

Live Пример: http://jsfiddle.net/rEPXY/18/

Изображение обрабатывается как встроенное, поэтому оно будет соответствовать размеру шрифта и высоте строки, а также разрывам строки. Измените характер изображения и его контейнера, и вы должны быть хорошими. В приведенном ниже CSS для тега <a> используется inline-block, но вы также можете изменить его на block со свойством width

Если вы тоже поместите тег <a>, он станет проблематичным, выровняйте его с другими элементами.

img
{
    border:1px solid black;float:left;
}
a
{
    border:1px solid red;display:inline-block;
}

Answer 5

Я не понимаю, почему у вас есть граница для тега. Я предполагаю, что когда вы добавляете границу, тег интерпретируется браузером как элемент с содержимым в нем, и поэтому он, вероятно, выделяет высоту строки по умолчанию и корректирует ширину, чтобы соответствовать содержимому внутри тега.