Как создать диапазон до ссылки html

Question

Я пытаюсь создать ссылку на изображение, которое прокручивается вниз. Это не КРИТИЧЕСКАЯ проблема.

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

<a href="#about">
  <div class="header-down-arrow">
    <span width="50px">
    <img src="downarrow.png" width="50px"></img>
    </span>
  </div>
</a>

Вот демонстрация моей проблемы:

Вот

Answer 1

Прежде всего, не нужно использовать закрывающий тег для <img>.

Установить встроенный блок в div .header-down-arrow

.header-down-arrow {
  display: inline-block;
}

<a href="#about">
  <div class="header-down-arrow">
    <span width="50px">
      <img src="downarrow.png" width="50px">
    </span>
  </div>
</a>