时间戳

首页 > 解决方案 > 如何修复按钮中的不均匀填充

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

问题描述

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

尝试更改line-height, border-box, margins,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>

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

标签： csssass

解决方案

发生这种情况是因为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>

推荐阅读