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

Я поместил изображение внутри тега a. но когда я дал границу изображению и тегу. Тег 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/

10
alignment css html javascript space

5 ответов

что-то вроде этого, что вы ищете?

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

в зависимости от того, как это изображение будет располагаться на вашем сайте, вы можете исправить это путем перемещения <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

3

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

a img {vertical-align:bottom}

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

2

Живой Пример:http://jsfiddle.net/rEPXY/18/

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

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

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

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

1