изменить ширину границы кнопки css без изменения других эффектов

Question

<button>Foo</button>
<button style="border-width: 3px">Bar</button>

Вкл. Firefox они отображаются как

Изменение border-width изменило другое последствия. Я просто хочу сделать границу меньше.

Вот модель коробки для кнопки слева

Я хочу кнопка для более плотного размещения вокруг текста примерно так:

В зависимости от модели коробки, похоже, что граница - это единственное, что отвечает за вертикальное заполнение.

Как мне сжать кнопку до текста, сохранив стили эстетики c?

Answer 1

Попробуйте это

button {
  outline: none;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 3px;
}

<button>Foo</button>
<button style="border-width: 2px">Bar</button>