Почему верхний padding меньше нижнего, хотя значения одинаковы?

Question

[stan288]

https://codepen.io/stn28/pen/eYLyROZ
сверху и снизу по 26px, а визуально кажется что верхний отступ намного меньше


<a href="#" class="btn">HELLO</a>

.btn {
  padding: 26px 20px;
  border: 2px solid black;
}

Answer 1

[Ankhena]

Вообще-то они одинаковые :)
НО у инлайновых элементов вертикальные паддинги ведут себя не так, как у блочных.
Если вы зададите побольше отступы у body или как-то еще отодвинете ссылку от верхнего края браузера, то увидите свои два одинаковых паддинга.

Answer 2

[sharpsss]

По кодпену которое ты прикрепил - решение вот такое

.btn {
  padding-left: 6px;
  padding-right:6px;
  padding-top:6px;
  padding-bottom:6px;
  border: 1px solid black;
}