css - 如何修复按钮中不均匀的填充

Question

这是一个非常基本的问题，但对于我来说我无法弄清楚。我正在创建一个按钮类，无论我做什么，文本的底部和右侧都有额外的空间。

尝试更改 line-height、border-box、margin、display、text -align 和其他一些。

.button {
  font-family: 'helvetica';
  font-size: 16px;
  color: #000;
  margin: 0px;
  position: relative;
  letter-spacing: .4em;
  text-transform: uppercase;
  text-decoration: none;
  color: $secondary-color;
  border: 4px solid #000;
  padding: .3em .75em;
  margin: 0px;
  text-align: center;
  display: inline-block;
  transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -webkit-transition: all .25s ease-in-out;


}

.button:hover {
    color: #fff;
    background-color: #000;
  }

<a href="ProjectPage.html" class="button">project</a>

只是试图获得一个均匀填充的按钮，该按钮将根据文本内容调整大小。

Answer 1

发生这种情况是因为 letter-spacing:0.4em 在你的最后一个字母上用 letter-spacing:0< 删除了 span 中最后一个字母的换行 像这样:

.button {
  font-family: 'helvetica';
  font-size: 16px;
  color: #000;
  margin: 0px;
  display:inline-block;
  align-items:center;
  position: relative;
  letter-spacing: .4em;
  text-transform: uppercase;
  text-decoration: none;
  border: 4px solid #000;
  padding: .3em .75em;
  margin: 0px;
  text-align: center;
  transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -webkit-transition: all .25s ease-in-out;
}


.button:hover {
    color: #fff;
    background-color: #000;
  }

<a href="ProjectPage.html" class="button">projec<span style="letter-spacing:0px;">t</span</a>