Почему кнопка по ширине и высоте больше, чем задано?

Почему кнопка по ширине и высоте получается больше, чем задано?

Был применен box-sizing: border-box;.

И из-за этого кнопка "заезжает" за экран.

Ссылка на CodePen

.button a {
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  width: 195px;
  height: 50px;
  box-sizing: border-box;
  padding: 18px 35px;
  background: #ff7340;
  border-radius: 25px;
  text-decoration: none;
}
<div class="button">
  <a href="/adventures">adventures</a>
</div>


Ответы (1 шт):

Автор решения: Vasily

Если Вы задаете pading(и) с одной или обоих сторон текста, то Вам не нужно задавать width и/или height отдельно для Вашей кнопки. В этом случае ее высота будет складываться из размера шрифта и отступов по вертикали, а ширина исходя из длинны текста и его отступов по горизонтали. Границы так же стоит учитывать при их наличии.

Когда Вы задаете дополнительный width и/или height, в случае если, например, width больше чем длинна текста, его отступов и границ, то размер Вашей кнопки будет равен заданному значению width, если же меньше, то дальше все зависит от конкретного браузера и вероятность того что кнопка окажется не того размера крайне вероятна.

Поскольку <a> это inline элемент, то он выравнивался относительно уровня начала самого текста. Именно поэтому он "заезжал под экран", поскольку стили для его родительского блока так же отсутствовали.

Для того что бы это исправить достаточно превратить его в блочный элемент, добавив ему свойство display со значением block или inline-block.

.button a {
  display: inline-block; 
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;  
  box-sizing: border-box;
  padding: 18px 35px;
  background: #ff7340;
  border-radius: 25px;
  text-decoration: none;
}
<div class="button">
  <a href="/adventures">adventures</a>
</div>

→ Ссылка