Почему у меня между блочными элементами пробелы?

*,
*::before,
*::after {
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
}

.wrapper {
  line-height: 48px;
  min-height: 500vh;
}

.container {
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 50;
}
.header__body {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 0;
}
.header__logo {
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}
.header__logo img {
  vertical-align: middle;
}
.header__burger {
  display: none;
}
.header__btn {
  border: 1px solid #fff;
  border-radius: 7px;
  color: inherit;
  display: inline-block;
  flex-shrink: 0;
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0em;
  padding: 5px 30px;
  text-align: center;
}
.header__btn:hover {
  background: #fff;
  color: #0773fa;
}

.menu {
  flex: 0 1 auto;
}
.menu__list {
  align-items: center;
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu__item {
  padding: 0 25px;
}
.menu__link {
  color: inherit;
  padding: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.menu__link:after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  color: white;
}

.home {
  background: linear-gradient(180deg, rgba(7, 115, 250, 0.7) 0%, #0773fa 80.03%);
  min-height: 100vh;
}
<div class="wrapper">
        <header class="header">
            <div class="container">
                <div class="header__body">
                    <a href="#" class="header__logo logo">
                        <img src="./img/logo/VERS.svg" alt="Vers">
                        <img src="./img/logo/rect.svg" alt="o">
                    </a>
                    <nav class="header__menu menu">
                        <ul class="menu__list">
                            <li class="menu__item">
                                <a href="" class="menu__link">Home</a>
                            </li>
                            <li class="menu__item">
                                <a href="" class="menu__link">Why Verso</a>
                            </li>
                            <li class="menu__item">
                                <a href="" class="menu__link">Team</a>
                            </li>
                            <li class="menu__item">
                                <a href="" class="menu__link">Roadmap</a>
                            </li>
                            <li class="menu__item">
                                <a href="" class="menu__link">Blog</a>
                            </li>
                            <li class="menu__item">
                                <a href="" class="menu__link">Whitepaper</a>
                            </li>
                        </ul>
                    </nav>
                    <a href="#" class="header__btn">Buy $VSO</a>
                    <div class="header__burger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </header>

        <section class="home">
            <div class="container">
                <div class="home__block">
                    <div class="home__title">
                        <h1>How to buy VSO</h1>
                    </div>
                    <div class="home__subtitle">Verso(VSO) is currently available on Gate.io as well as on several
                        decentralized exchanges(DEX) connected to the Avalanche blockchain.
                    </div>
                    <div class="home__content lists">
                        <div class="lists__column">
                            <div class="lists__title">CEX Listings</div>
                            <ul class="lists__items list">
                                <li class="list_item"></li>
                            </ul>
                        </div>
                        <div class="lists__column">
                            <div class="lists__title">DEX Listings</div>
                            <ul class="lists__items list">
                                <li class="list_item"></li>
                                <li class="list_item"></li>
                                <li class="list_item"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="home">
            <div class="container">
                <div class="home__block">
                    <div class="home__title">
                        <h1>How to buy VSO</h1>
                    </div>
                    <div class="home__subtitle">Verso(VSO) is currently available on Gate.io as well as on several
                        decentralized exchanges(DEX) connected to the Avalanche blockchain.
                    </div>
                    <div class="home__content lists">
                        <div class="lists__column">
                            <div class="lists__title">CEX Listings</div>
                            <ul class="lists__items list">
                                <li class="list_item"></li>
                            </ul>
                        </div>
                        <div class="lists__column">
                            <div class="lists__title">DEX Listings</div>
                            <ul class="lists__items list">
                                <li class="list_item"></li>
                                <li class="list_item"></li>
                                <li class="list_item"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

подскажите, пожалуйста, почему у меня проблема с пробелами решается заданием в селекторе

*, 
*::before, 
*::after {
font-size: 0;}

ведь header и section блочные элементы. Или я чего-то не понимаю?


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

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

Потому что иногда нужно в devtools смотреть.

→ Ссылка