#html #css #border
#HTML #css #граница
Вопрос:
Это изображение описывает все это:
Как вы можете видеть, под каждым изображением есть граница, но не слева или справа.
Также вы можете видеть, я отметил тег ссылки в инспекторе, и он показывает рамку примерно от середины изображения до нижней части изображения, включая нежелательную границу.
Я уже удалил текстовое оформление из ссылки, но это ничего не изменило.
Поскольку большинство не поняли корень проблемы, вот увеличенная версия скриншота: http://imageshack.us/f/10/screenshotfgi.png Перейдите по ссылке и снова щелкните на полученном изображении.
Посмотрите на синюю рамку в правом нижнем углу. Это отмечено Chrome, поскольку я выбрал тег hyperlink в инспекторе. Здесь вы можете видеть, что гиперссылка вызывает границу / пробел. Как избавиться от этого пространства, изменив стиль тега гиперссылки?
Комментарии:
1. вы пробовали добавить style=»border:0;» в тег img?
2. ага… посмотрите на дополнительную информацию, полученную несколько секунд назад… вы можете видеть, что это гиперссылка, а не изображение
3. Не верьте тому, что видите — прочитайте код. Вы не поверите, что все это может привести к тому, что это произойдет.
Ответ №1:
у меня была похожая проблема.
установите line-height: 0 для якорей или td.
#your_id table a, #your_id table td {
line-height: 0;
}
или вручную установите height значение a или td.
#your_id table a, #your_id table td {
height: 30px;
}
#your_id table a {
display: block;
}
у меня работают оба способа.
Ответ №2:
Это не граница, это пробел.
Изображения по умолчанию располагаются на той же строке, что и буквы типа a, b, c и d. Под этой строкой есть место для спусков, которые вы найдете в таких буквах, как g, j и y.
Установите свойство CSS vertical-align для перемещения изображения по этой строке.
Ответ №3:
Удалите границу изображения, когда оно связано, не прибегая к border=»0″:
a img {
text-decoration: none;
border: 0 none;
}
Хотя, похоже, это не ваша проблема.
РЕДАКТИРОВАТЬ: Проверьте заполнение ячеек в вашей таблице. К вашим ячейкам применяется какое-то заполнение или поля.
Комментарии:
1. У него нет границы в теге img. Вы можете видеть, что слева или справа от изображения нет границ. Также он был бы синим, если бы был.
2. easwee прав, кроме того, как вы можете видеть на картинке, она исходит из гиперссылки … синее поле в правом нижнем углу — это гиперссылка, и это ограничивает область, включая белую рамку внизу
Ответ №4:
Поскольку вы используете таблицу, это может быть связано со свойством cellspacing.
Установить:
<table cellspacing="0" cellpadding="0">
в вашей таблице. Граница, которая появляется, когда img находится в ссылке, обычно синего цвета.
Редактировать: Еще одной вещью, которая может привести к сбоям, может быть выравнивание по вертикали. Я думаю, что по умолчанию установлено значение baseline — попробуйте установить вертикальное выравнивание на vertical-align:top как для td, так и для img внутри
Комментарии:
1. уже, несмотря на то, что граница существует, как вы можете видеть на картинке, она исходит от гиперссылки
2. @Joern Akkermann Можете ли вы опубликовать ссылку на фактический код? Также в вашей таблице есть интервал между границами: 2px (вы можете видеть это в инспекторе кода справа), поэтому css эквивалентен cellspacing .
Ответ №5:
Трудно сказать без фрагмента примера кода…
Я бы сказал, начните с сброса всех свойств, которые могли вызвать это:
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;
}
Помогает ли это?