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

尽管the spec说https://your-website.com/wp-json/test/v1/posts/hello-world不应在行尾添加，但似乎无论如何都要添加。您可以使用此hello-world来“撤消”它：

letter-spacing

或等效地

padding

padding: .3em calc(.74em - .4em) .3em .75em;

padding: .3em .35em .3em .75em;

Answer 2

之所以发生这种情况，是因为您的最后一个字母上的letter-spacing:0.4em用span删除了letter-spacing:0中的换行最后一个字母，如下所示：

.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>

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

2 个答案: