为什么开始按钮上有白色边框[重复]

Question

我今天刚开始学习编码，遇到了这个问题。 我的开始按钮周围有这个白色边框，我不知道为什么。 当我更改 margin-top 时，它会变小，但它上面的文本之间的空间也会变小，我不想要。我在这里先向您的帮助表示感谢。 （我不知道这个问题的布局是否正确，所以任何关于这样做的提示也会有所帮助）。

.main__btn {
  font-size: 1rem;
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

<div class="main">
  <div class="main__container">
    <div class="main__content">
      <h1>NEXT GENERATION</h1>
      <h2>TECHNOLOGY</h2>
      <P>See what make us different.</P>
      <button><div class="main__btn"><a href="/">Get Started</a></div></button>
    </div>
    <div class="main__img--container"><img src="images/pic1.svg" alt="pic" id="main__img"></div>
  </div>
</div>

Answer 1

按钮上有一个2px的默认边框

.main__btn {
  font-size: 1rem;
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.main {
  padding: 1em;
}

button {
  border: none;
}

<div class="main">
  <div class="main__container">
    <div class="main__content">
      <h1>NEXT GENERATION</h1>
      <h2>TECHNOLOGY</h2>
      <P>See what make us different.</P>
      <button><div class="main__btn"><a href="/">Get Started</a></div></button>
    </div>
  </div>