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

Question

скрипка

Скриншот

Source

Вопрос

Обратите внимание, как черная рамка появляется только вокруг нижней части изображения? Как мне исправить это так, чтобы оно появилось вокруг всего этого?

Я уже делал это раньше, но не помню, как ...

Answer 1

Попробуйте это:

HTML

<a href="#">
    <img width="200" border="0" height="200" />
</a>

CSS

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

Демонстрацию в режиме реального времени можно найти здесь

Вероятно, лучше редактировать границу тега <img> вместо <a>

Answer 2

Вы можете использовать:

a {
    display: inline-block;
}

JS Fiddle demo .

Или,

a {
    display: block;
}

JS Fiddle demo.

Вероятно, что inline-block больше соответствует вашим потребностям (и даже Internet Explorer 6 и 7 должны прекрасно с ним работать , поскольку a«естественно display: inline»).

Answer 3

Поместите границу вокруг изображения так: http://jsfiddle.net/nmhAs/

img {
    border:1px solid black;
}

Answer 4

В вашем CSS поместите

display:block;

или

display:inline-block;

на вас a тег.

Answer 5

добавить display: inline-block к вашему a