时间戳

首页 > 解决方案 > 为什么开始按钮上有白色边框

html - 为什么开始按钮上有白色边框

问题描述

我今天刚开始学习编码，遇到了这个问题。我的开始按钮周围有这个白色边框，我不知道为什么。当我更改 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>

标签： htmlcssbutton

解决方案

按钮上有一个 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>

推荐阅读