Откуда берется этот отступ?

Question

Никаких лишних параметров не задано, но откуда-то взялся этот отступ.

Кто-нибудь подскажет, в чем проблема?

.page__body {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.page-header {
  margin: 0 auto;
  width: 320px;
  background-color: purple;
}

.page-header__wrapper {
  display: flex;
  padding: 15px 0;
  margin: 0 auto;
  width: 280px;
}

.page-header__link {
  margin-right: 65px;
}

.page-header__logo {
  width: 191px;
}

.main-nav__list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-direction: column;
}

.main-nav__link {
  display: block;
  padding: 24px 68px;
  border: 1px solid $basic-grey;
  text-decoration: none;
  text-align: center;
  @extend %fonts-link-header;
}

.preview {
  position: relative;
  margin: 0 auto;
  width: 320px;
}

.preview__background {
  position: absolute;
  top: 0;
  display: block;
}

 <header class="page-header">
          <div class="page-header__wrapper">
             <a href="#" class="link page-header__link">
                <img class="logo page-header__logo" src="./img/logo-mobile.svg" alt="Логотип компании Cat Energy">
             </a>
             <button type="button" class="page-header__menu"></button>
          </div>      
          <nav class="main-nav visually-hidden">
             <ul class="main-nav__list">
                <li class="main-nav__item">
                   <a class="main-nav__link" href="#">
                      Главная
                   </a>
                </li>
                <li class="main-nav__item">
                   <a class="main-nav__link" href="#">
                      Каталог Продукции
                   </a>
                </li>
                <li class="main-nav__item">
                   <a class="main-nav__link" href="#">
                      Подбор Программы
                   </a>
                </li>
             </ul>
          </nav>
       </header>
    
        <main class="page-main">
           <section class="preview">   
              <img class="preview__background" src="./img/[email protected]" alt="">
              <h1 class="visually-hidden">Cat Energy</h1>
              <h2 class="preview__title">Функциональное питание для котов</h2>
              <span class="preview__subtitle">Занялся собой? Займись котом!</span>
        
    
      <img class="previуw__img" src="./img/[email protected]" alt="Пакет с едой cat energy для котов со вкусом курицы">
          <button class="button preview__button" type="button">Подобрать Программу</button>
       </section>

Answer 1

У меня в codepen все немного по другом выглядит https://codepen.io/Ercogx/pen/VwmXOWO?editors=1100 . Но могу предположить что проблема в предустановленных стилях браузера вы можете их перебить, вот например обнуление внешних отступов для Ваших заголовков

.visually-hidden,
.preview__title{
    margin-top: 0;
    margin-bottom: 0;
}

Answer 2

У тега h1 в <section class="preview"> есть margin. Из-за него этот отступ. Можете добавить в стили

.preview h1 {
  margin-top:0;
}

Answer 3

.visually-hidden,
.preview__title{
    margin-top: 0;
    margin-bottom: 0;
}

БЛОГ НА HUSL

Откуда берется этот отступ?

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