Как избавиться от границ ссылок при работе со связанными изображениями?

Question

Это изображение описывает все это:

Как видите, под каждым изображением есть рамка, но не слева или справа.

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

Я уже удалил текстовое оформление из ссылки, но это ничего не изменило.

Поскольку большинство не поняло корень проблемы, вот увеличенная версия скриншота: http://imageshack.us/f/10/screenshotfgi.png/ Перейдите по ссылке и снова нажмите на картинку, которую вы получите.

Посмотрите на синее поле в правом нижнем углу. Это отмечено Chrome, поскольку я выбрал гиперссылку-тег в инспекторе. Здесь вы можете видеть, что гиперссылка вызывает границу / пробел. Как избавиться от этого пространства, изменив стиль гиперссылки?

Answer 1

Трудно сказать без примера кода ...

Я бы сказал, начните со сброса всех свойств, которые могли вызвать это:

table {
    border-collapse: collapse;
}
table, tr, th, td {
    border: 0;
    padding: 0;
}
td, td a {
    line-height: 0;
    white-space: normal
}
td, a, td a img {
    border: 0;
    padding: 0;
    margin: 0;
}

Это помогает?

Answer 2

У меня была похожая проблема.

набор line-height: 0 для якорей или тд.

#your_id table a, #your_id table td {
    line-height: 0;
}

или установить вручную height из или тд.

#your_id table a, #your_id table td {
    height: 30px;
}
#your_id table a {
    display: block;
}

у меня оба пути работают.

Answer 3

Удалите границу изображения, когда оно связано, не прибегая к border = "0":

a img {
    text-decoration: none;
    border: 0 none;
    }

Не похоже, что ваша проблема, хотя.

РЕДАКТИРОВАТЬ: Проверьте cellpadding/ cellspacing вашего стола.К вашим ячейкам применяются какие-то отступы или поля.

Answer 4

Поскольку вы используете таблицу, которая может быть связана со свойством cellspacing.

Set:

<table cellspacing="0" cellpadding="0">

на вашем столе. Граница, которая появляется, когда img находится в ссылке, обычно синего цвета.

EDIT: Еще одна вещь, которая может испортить это вертикальное выравнивание. Я думаю, что по умолчанию установлено значение baseline - попробуйте установить вертикальное выравнивание на vertical-align:top на td и img внутри

Answer 5

Это не граница, это пробел.

Изображения, по умолчанию, размещаются в одной строке с буквами, подобными a, b, c и d. Под этой линией есть место для спусков, которые вы найдете на буквах типа g, j и y.

Установите свойство вертикального выравнивания CSS для перемещения изображения в этой строке.