Почему у меня между блочными элементами пробелы?
*,
*::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 блочные элементы. Или я чего-то не понимаю?
