HTML-ссылка на изображение показывает только под этим изображением

Question

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

вот мой код:

HTML:

       <a href="admin.php">
                <img src="steak.png" alt="AdminSteak" class="wrapSteak">
            </a>

и CSS:

  .wrapSteak {
      position: relative;
      top: 15px;
      left: 45px;
      height: 50px;
      width: 25px;
    }

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

Заранее спасибо.

Answer 1

Назначить wrapSteak родительскому элементу a и сделать его inline-block.

.wrapSteak {
      position: relative;
      top: 15px;
      left: 45px;
      display: inline-block;
      height: 50px;
      width: 25px;
 }

<a href="admin.php" class="wrapSteak">
  <img src="steak.png" alt="AdminSteak">
 </a>

Это должно работать.создание тега привязки inline-block содержит тег изображения, и если вы применяете положение относительно тега image, то тег anchor остается на своей первоначальной позиции, и единственное изображение будет перемещено.