Как исправить неравномерность заполнения в кнопке

Question

Это безумно основной вопрос, но я не могу с ним разобраться. Я создаю класс кнопки, и независимо от того, что я делаю, в нижней и правой части текста есть дополнительное место.

Пробные изменения line-height, border-box, margin s, 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 на вашем последнем письме, чтобы удалить эту последнюю букву в 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>

Answer 2

Хотя спецификация говорит, что letter-spacing не следует добавлять в конце строки, похоже, что она добавляется независимо. Вы можете использовать это padding вместо этого, чтобы "отменить" это:

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

или эквивалентно

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

.b1 {
  border: 1px solid black;
  padding: .3em .75em;
  letter-spacing: .4em;
}
.b2 {
  border: 1px solid black;
  padding: .3em calc(.75em - .4em) .3em .75em;
  letter-spacing: .4em;
}

<span class="b1">FOO</span>
<span class="b2">FOO</span>