html - 如何使 div 的边距不可点击？

Question

所以我目前正在学习如何使用 html 和 CSS，我决定用一个非常小的元素来测试自己。当我完成后，我遇到了一个小问题，我不知道如何解决。
这是我的 html
(注意:我使用的是 jsfiddle.net，所以 !DOCTYPE html 和 head 之类的东西不是问题)

div {
  width: 300px;
  background-color: rgb(255, 145, 145);
  border: 1px solid black;
  border-radius: 20px;
  font-size: 1.5em;
  margin: auto;
  padding: 2px
}
div:hover {
  background-color: rgb(255, 100, 100)
}
div:active {
  background-color: rgb(255, 75, 75);
}
a {
  text-decoration: none;
  color: rgb(145, 230, 255);
  font-family: serif, cursive;
  font-weight: bold;
}
span {
  color: red;
  font-family: Comic Sans MS;
}

<a href="#" target="_blank">
  <div>
    <p>
      When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this.
    </p>
  </div>
</a>

问题是我的 div 的边距是可点击的，而这正是我不想要的。另请记住，我是初学者，因此请尽可能简单地解释为什么会发生这种情况。

Answer 1

不要将边距和宽度放在 div 上，而是将其放在 a 元素上并将其设置为阻止。

a {margin: 0px auto; width: 300px; display: block;}