Div внутри якорной ошибки

Question

Итак, я создал тег 'div' и попытался поместить его в тег 'a'.Из того, что я понял из поиска по этой теме, вы можете сделать это в html5, но вы не можете сделать это в html4.Но при открытии html-файла в моем браузере возникает ошибка.Кликабелен не только div, но и все пространство справа от него.Вот мой HTML-код:

    <a href="#"><div id="div1"></div></a>

и мой CSS:

    #div1 {
            width:250px;
            height:200px;
            background:linear-gradient(orange,red);
    }

Знаете ли вы, почему это происходит?Заранее спасибо

Answer 1

Div являются элементами уровня блока по умолчанию и занимают 100% ширины их родительского элемента.Замените это на inline-block вместо:

#div1 {
  width: 250px;
  height: 200px;
  background: linear-gradient(orange, red);
  display:inline-block;
}

<a href="#">
  <div id="div1"></div>
</a>