Почему высота элемента больше чем его содержимое?

Question

[Дмитрий Ярощук]

Почему высота ссылки больше, чем ее содержимое, то есть пространство между контентом и границей ссылки? Как его убрать ?

<div class="header-content">
    <div class="container">
        <div class="header-content__inner">
            <a href="./../index.html" class="header__logo">
                <img src="./../../img/logo/logo.svg" alt="Logo" class="header__logo-img">
            </a>
            <nav class="header-nav nav">
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="!#" class="nav__link">Entertainments</a>
                    </li>
                    <li class="nav__item">
                        <a href="!#" class="nav__link">drink & food</a>
                    </li>
                    <li class="nav__item">
                        <a href="!#" class="nav__link">events</a>
                    </li>
                    <li class="nav__item">
                        <a href="!#" class="nav__link">party & groups</a>
                    </li>
                    <li class="nav__item">
                        <a href="!#" class="nav__link">special offers</a>
                    </li>
                    <li class="nav__item">
                        <a href="!#" class="nav__link">bundles</a>
                    </li>
                    <li class="nav__item">
                        <a href="!#" class="nav__link">gift card</a>
                    </li>
                </ul>
            </nav>
            <button class="header__basket">
                <img src="./../../img/header/basket.svg" alt="Basket" class="header__basket-icon">
                <span class="header__basket-text">CART <span class="header__basket-count">(6)</span></span>
            </button>
            <button class="mobile-nav-btn">
                <div class="nav-icon"></div>
            </button>
        </div>
    </div>
</div>

.container {
    box-sizing: border-box;
    max-width: 1726px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}
.header-content {
  padding: 24px 0;
}

.header-content__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header-nav {
  flex-basis: 1164px;

  .nav__list {
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  .nav__link {
    font-size: 32px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: #563419;
  }
}

.header__basket {
  flex-basis: 115px;
  display: flex;
  gap: 4px;

  letter-spacing: 0.32px;
  text-transform: uppercase;
}

.header__basket-text {
  display: flex;
  gap: 4px;

  font-size: 32px;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

Comments

[FeST1VaL]

line-height: 1;

[Дмитрий Ярощук]

@FeST1VaL
пробовал задавать line-height: 1; все равно отступ остается

Answer 1

[Rsa97]

Потому что у символов шрифта могут быть ещё и подстрочные элементы.

Comments

[Дмитрий Ярощук]

Rsa97 подскажите а как убрать этот отступ ?

[Rsa97]

Дмитрий Ярощук, line-height: 1;
Но если появится символ с подстрочником, какой нибудь 'Ş' или 'Щ', то он выйдет за границы области

[Дмитрий Ярощук]

Rsa97 пробовал задавать line-height: 1; все равно отступ остается