试图使边距不可点击

Question

在制作一些按钮时，我运行遇到了这个问题，按钮旁边的空白 spaces/margins 是可点击的，这就是我现在试图摆脱的问题。我一直在查看讨论此类问题的类似帖子，但我没有运气将这些答案应用到我的代码中，不幸的是，我对它的摆弄也没有太大帮助。在这一点上，这件事有点让我发疯，我们将不胜感激 :')

这是代码本身：

button {
  background-color: #edca6e;
  border: none;
  color: #523e5c;
  padding: 8px 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  font-family: 'Lucida Console';
  margin: 30px;
  cursor: pointer;
}

<center>
  <img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
  <!--portfolio, about, contact, misc.-->
  <br><br><br>
  <a href="../1portfolio/portfolio.html"><button>text</button></a>
  <a href="/2aboutme/about.html"><button>text</button></a>
  <a href="#"><button style="margin:30px;">text</button></a>
  <a href="../4misc/misc.html"><button>text</button></a>
</center>

如果还有什么需要澄清的，请告诉我:)

Answer 1

边距应移至 a 而不是 button。截至目前，button 有一些余量，这使得 a 有一些多余的 space。

是的，您不应该在 a 中使用 button。两者都是可点击的。

Answer 2

当你用 <a> 标签包裹你的按钮时，按钮的整个组件将是可点击的（包括边距）。虽然将 <a> 与 <button> 一起使用是不可行的，但我仍然有一个解决方案可以解决您当前的问题。

要使边距不可点击，可以在<a>标签中应用边距，并将显示属性从<button>样式移动到<a>样式，请参考以下代码：

CSS:

  button {
     background-color: #edca6e;
     border: none;
     color: #523e5c;
     padding: 8px 60px;
     text-align: center;
     text-decoration: none;
     font-size: 30px;
     font-family: 'Lucida Console';
     cursor: pointer;
  }
  a{
     display: inline-block;
     margin: 30px;
  }

HTML:

    <center>
      <img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
      <!--portfolio, about, contact, misc.-->
      <br><br><br>
      <a  href="../1portfolio/portfolio.html"><button>text</button></a>
      <a  href="/2aboutme/about.html"><button>text</button></a>
      <a  href="#"><button >text</button></a>
      <a  href="../4misc/misc.html"><button>text</button></a>
    </center>

试图使边距不可点击

Trying to make margins unclickable

html

css

margin

button