Hyperlink tag not behaving as I expect in html

Question

1. I created a div and inside div I added a hypertag element <a>
2. When I give a margin for the <a> tag it moves the <div> tag instead of <a> tag
3. I do not understand this behaviour. Could you please check this issue .

.first {
  color: black;
  width: 300px;
  height: 300px;
  background: cyan;
}

a {
  margin: 100px;
  display: block;
}

<div class="first">
  <a href="http://www.google.com" id="result">Explore Google With Prevent Default</a>
  <a href="http://www.google.com" target="_blank">Explore Google</a>
</div>