Почему border делает отступ?

[trvkyo]

Приветствую!

Создаю свой первый сайт. Помогите пожалуйста понять и решить, почему при использовании атрибута border он делает отступ снизу от контента? Padding нигде не стоит в коде. Прикрепляю скрины как выглядит непонятный отступ и результат, который хочу достичь позже

Мой код:

HTML

<main>

<div class="menu text stroke">

<nav>

<a href="./Playlists.html">PLAYLISTS</a>

<a href="./LocalArtists.html">LOCAL ARTISTS</a>

<a href="./Shop.html">SHOP</a>

<a href="./Schedule.html">SCHEDULE</a>

<a href="./About.html">ABOUT</a>

<a href="./SendRespect.html">SEND RESPECT</a>

</nav>

</div>

</main>

CSS

.menu a {

font-size: 350%;

text-transform: uppercase;

border: 2px solid #363636;

[klierik]

Здравствуйте.

Выложите код в песочницу

[trvkyo]

On 7/28/2022 at 5:29 AM, klierik said:

Здравствуйте.

Выложите код в песочницу

Подскажите пожалуйста как это сделать, где на форуме песочница? 

[klierik]

Цитата

1.3 Если проблема возникла в процессе создания блока/элемента страницы, выложи код сюда: jsfiddle.net