将<a>元素样式化为按钮时出现显示异常问题求助

我创建了.btn工具类，用于统一<button>和<a>的按钮样式，但<a>元素显示异常：

• 设置的vertical-align: middle无法让<a>内的SVG居中
• <a>元素周围存在莫名的额外间距

我已经定义了--button-height CSS变量统一按钮高度，.btn-square类利用该变量保证方形按钮宽高一致，尝试通过vertical-align: middle实现SVG居中，但效果仅对<button>生效。

相关代码 #

CSS代码 #

*,
*::before,
*::after {
  box-sizing: border-box;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
body {
  font-family: "Inter", sans-serif;
  background-color: hsl(40deg, 22%, 8%);
}

.btn {
  display: inline-block;
  border-radius: 8px;
  border-width: 2px;
  border-style: solid;
  border-color: hsl(40deg, 40%, 94%);
  font-size: 1rem;
  font-weight: 700;
  --button-height: 2.25rem;
  height: var(--button-height);
  cursor: pointer;
}

.btn>svg {
  width: 1.275rem;
  height: 1.275rem;
}

.btn-primary {
  color: hsl(40deg, 22%, 8%);
  background-color: hsl(40deg, 40%, 94%);
}

.btn-primary>svg {
  fill: hsl(40deg, 22%, 8%);
}

.btn-primary:hover {
  background-color: hsl(38deg, 22%, 90%);
}

.btn-secondary {
  color: hsl(40deg, 40%, 94%);
  background-color: transparent;
}

.btn-secondary>svg {
  fill: hsl(40deg, 40%, 94%);
}

.btn-secondary:hover {
  color: hsl(38deg, 22%, 90%);
  border-color: hsl(38deg, 22%, 90%);
}

.btn-secondary:hover>svg {
  fill: hsl(38deg, 22%, 90%);
}

.btn-square {
  padding: 0;
  width: var(--button-height);
}

.btn-square>svg {
  vertical-align: middle;
}

.btn-small {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.btn-medium {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.btn-large {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

HTML代码 #

<button class="btn btn-primary btn-small mr-200">submit</button>
<a class="btn btn-secondary btn-small mr-200">submit</a>
<button class="btn btn-primary btn-square mr-200">
  <svg width="96"
       height="96"
       viewBox="0 0 96 96"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_14_188)">
      <path d="M44 80C44 82.2092 45.7908 84 48 84C50.2092 84 52 82.2092 52 80V52H80C82.2092 52 84 50.2092 84 48C84 45.7908 82.2092 44 80 44H52V16C52 13.7909 50.2092 12 48 12C45.7908 12 44 13.7909 44 16V44H16C13.7909 44 12 45.7908 12 48C12 50.2092 13.7909 52 16 52H44V80Z"/>
    </g>
    <defs>
      <clipPath id="clip0_14_188">
        <rect width="96" height="96" fill="white" />
      </clipPath>
    </defs>
  </svg>
</button>
<a class="btn btn-secondary btn-square mr-200">
  <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_14_188)">
      <path d="M44 80C44 82.2092 45.7908 84 48 84C50.2092 84 52 82.2092 52 80V52H80C82.2092 52 84 50.2092 84 48C84 45.7908 82.2092 44 80 44H52V16C52 13.7909 50.2092 12 48 12C45.7908 12 44 13.7909 44 16V44H16C13.7909 44 12 45.7908 12 48C12 50.2092 13.7909 52 16 52H44V80Z"/>
    </g>
    <defs>
      <clipPath id="clip0_14_188">
        <rect width="96" height="96" fill="white" />
      </clipPath>
    </defs>
  </svg>
</a>

解决方案 #

1. 消除<a>元素的额外间距 #

<a>作为inline-block元素，默认会基于文本基线对齐，导致底部出现额外间距。给.btn添加vertical-align: middle（或top）即可解决：

.btn {
  /* 原有样式不变 */
  vertical-align: middle;
}

2. 实现SVG在<a>内的完美居中 #

vertical-align: middle对部分行内元素的居中效果不稳定，改用Flex布局能更可靠地实现<button>和<a>内SVG的居中。修改.btn-square的样式：

.btn-square {
  padding: 0;
  width: var(--button-height);
  /* 添加Flex布局 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 可以移除原有的vertical-align样式 */
.btn-square>svg {
  /* vertical-align: middle; 移除 */
}

修改后，<button>和<a>的按钮样式将完全一致，SVG也能完美居中，且无额外间距。

内容的提问来源于stack exchange，提问作者chocojunkie