部分之间的工件边距

Question

有人可以向我解释为什么我在两个部分之间有一个 space，但在检查器中我没有看到任何填充或边距等。

这是 jsfiddle - https://jsfiddle.net/1frk5w8s/7/

////////////////////////////////////////// //////////////////////////////////////////////// //////////////////////////////////////////////// //////////////////////////////////////////////// ////////////////////////////////////////////////

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Porten</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    @@include('_header.html')
    <main class="main">
      <section class="page-section top">
        <div class="container">
          <div class="top__inner">
            <h1 class="top__title"></h1>
            <img src="img/top-dron.png" alt="mavic" />
            <p class="top__text"></p>
            <ul class="top__social-list">
              <li class="top__social-item">
                <a href="#" class="top__social-link">
                  <img src="img/facebook.svg" alt="alt" />
                </a>
              </li>
              <li class="top__social-item">
                <a href="#" class="top__social-link">
                  <img src="img/youtube.svg" alt="alt" />
                </a>
              </li>
              <li class="top__social-item">
                <a href="#" class="top__social-link">
                  <img src="img/instagram.svg" alt="alt" />
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="scroll__btn">
          <a href="#"><img src="img/arrow-down.svg" alt="" /></a>
        </div>
      </section>
      <section class="page-section product">
        <div class="container">
          <h3 class="title product__title"></h3>
          <div class="product__inner">
            <div class="product__text">
              <p>
                Дрон Mavic 2 Pro - это инженерное чудо, идеальное для
                аэросъемки. Дрон обладает всеми лучшими технологиями DJI, он
                преобразит мир аэросъемки.
              </p>
              <p>
                Mavic 2 Pro оснащен совершенно новой камерой Hasselblad L1D-20c.
                Камера L1D-20c работает по уникальной технологии Hasselblad
                Natural Colour Solution (HNCS)5, позволяющей пользователям
                делать великолепные снимки с воздуха с разрешением в 20
                мегапикселей и потрясающими цветами.
              </p>
            </div>
            <div class="product__slider-box">
              <p class="product__slider-text"></p>
              <div class="product__slider">
                <div class="product__slider-item">
                  <img src="img/product-dron.jpg" alt="alt" class="product__slider-img" />
                </div>
                <div class="product__slider-item">
                  <img src="#" alt="alt" class="product__slider-img" />
                </div>
                <div class="product__slider-item">
                  <img src="#" alt="alt" class="product__slider-img" />
                </div>
                <div class="product__slider-item">
                  <img src="#" alt="alt" class="product__slider-img" />
                </div>
                <div class="product__slider-item">
                  <img src="#" alt="alt" class="product__slider-img" />
                </div>
                <div class="product__slider-item">
                  <img src="#" alt="alt" class="product__slider-img" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="scroll__btn">
          <a href="#"><img src="img/arrow-down.svg" alt="arrow" /></a>
        </div>
      </section>
      <section class="page-section benefits">
        <div class="container">
          <h3 class="title product__title"></h3>
          <div class="benefits__items">
            <div class="benefits__item">
              <div class="benefits__num">1</div>
              <div class="benefits__img">
                <img src="img/benefits-1.jpg" alt="" />
              </div>
              <div class="benefits__info">
                <h4 class="benefits__info-title">Интеллектуальные режимы</h4>
                <p class="benefits__info-text">
                  Mavic 2 унаследовал 6 стандартных режимов интеллектуальной
                  съемки QuickShot:Roket/Dronie/Circle/Helix/Boomerang/Asteroid.
                </p>
              </div>
            </div>
            <div class="benefits__item">
              <div class="benefits__num">2</div>
              <div class="benefits__img">
                <img src="img/benefits-2.jpg" alt="" />
              </div>
              <div class="benefits__info">
                <h4 class="benefits__info-title">Active Track 2.0</h4>
                <p class="benefits__info-text">
                  Усовершенствованный режим второго поколения распознаёт и
                  отслеживает объекты ещё точнее, быстрее и умнее.
                </p>
              </div>
            </div>
            <div class="benefits__item">
              <div class="benefits__num">3</div>
              <div class="benefits__img">
                <img src="img/benefits-3.jpg" alt="" />
              </div>
              <div class="benefits__info">
                <h4 class="benefits__info-title">Панорамная съемка</h4>
                <p class="benefits__info-text">
                  Mavic 2 поддерживает 4 режима панорамной съёмки: сферическая,
                  180 градусов, горизонтальная, вертикальная
                </p>
              </div>
            </div>
            <div class="benefits__item">
              <div class="benefits__num">4</div>
              <div class="benefits__img">
                <img src="img/benefits-4.jpg" alt="" />
              </div>
              <div class="benefits__info">
                <h4 class="benefits__info-title">Крутая камера!</h4>
                <p class="benefits__info-text">
                  Технология Hyperlapse в четырёх режимах исполнения. Улучшенный
                  фото режим HDR Функция HyperLight для съёмки в условиях
                  слабого освещения 4К съёмка
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="scroll__btn">
          <a href="#"><img src="img/arrow-down.svg" alt="" /></a>
        </div>
      </section>
      <section class="page-section specification">
        <div class="container">
          <h3 class="title specification__title">Характеристики</h3>
          <div class="specification__inner">
            <div class="specification__item">
              <div class="specification__box">
                <h4 class="specification__box-title">Dlog-M 10 бит</h4>
                <p class="specification__box-text">
                  Mavic 2 Pro поддерживает цветовой профиль Dlog-M 10 бит с
                  более широким динамическим диапазоном, дающим больше
                  возможностей для цветокоррекции.
                </p>
              </div>
              <div class="specification__box">
                <h4 class="specification__box-title">Камера Hasselblad</h4>
                <p class="specification__box-text">
                  Камера Hasselblad L1D-20С известны эргономичным дизайном и
                  превосходным качеством изображений.
                </p>
              </div>
            </div>
            <div class="specification__item">
              <img src="img/top-dron.png" alt="" />
            </div>
            <div class="specification__item">
              <div class="specification__box">
                <h4 class="specification__box-title">Матрица CMOS 1</h4>
                <p class="specification__box-text">
                  Зона активной работы новой 1-дюймовой матрицы CMOS в четыре
                  раза превышает показатели Mavic Pro
                </p>
              </div>
              <div class="specification__box">
                <h4 class="specification__box-title">Видео HDR</h4>
                <p class="specification__box-text">
                  Благодаря поддержке видео 4K HDR 10 бит, Mavic 2 Pro можно
                  подсоединить к совместимому с HLG 4K ТВ и просматривать запись
                  в полном цветовом спектре
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="scroll__btn">
          <a href="#"><img src="img/arrow-down.svg" alt="" /></a>
        </div>
      </section>
      <section class="page-section questions">
        <div class="container">
          <h3 class="title questions__title"></h3>
          <div class="questions__items">
            <div class="questions__item">
              <h4 class="questions__item-title">
                Какие отличия между Mavic 2 Pro и Mavic 2 Zoom?
              </h4>
              <p class="questions__item-text">
                В Mavic 2 улучшены практически все аспекты: камера, передача
                видеосигнала, полётное время, скорость, уровень шума,
                обнаружение препятствий в нескольких направлениях,
                интеллектуальные функции и уникальная функция Hyperlapse
                (гиперлапс).
              </p>
            </div>
            <div class="questions__item">
              <h4 class="questions__item-title">
                Чем Mavic 2 лучше Mavic Pro?
              </h4>
              <p class="questions__item-text">
                В Mavic 2 улучшены практически все аспекты: камера, передача
                видеосигнала, полётное время, скорость, уровень шума,
                обнаружение препятствий в нескольких направлениях,
                интеллектуальные функции и уникальная функция Hyperlapse
                (гиперлапс).
              </p>
            </div>
            <div class="questions__item">
              <h4 class="questions__item-title">
                Можно ли подключить Mavic 2 к очкам DJI Goggles?
              </h4>
              <p class="questions__item-text">
                В Mavic 2 улучшены практически все аспекты: камера, передача
                видеосигнала, полётное время, скорость, уровень шума,
                обнаружение препятствий в нескольких направлениях,
                интеллектуальные функции и уникальная функция Hyperlapse
                (гиперлапс).
              </p>
            </div>
            <div class="questions__item">
              <h4 class="questions__item-title">
                Является ли Mavic 2 водонепроницаемым？
              </h4>
              <p class="questions__item-text">
                В Mavic 2 улучшены практически все аспекты: камера, передача
                видеосигнала, полётное время, скорость, уровень шума,
                обнаружение препятствий в нескольких направлениях,
                интеллектуальные функции и уникальная функция Hyperlapse
                (гиперлапс).
              </p>
            </div>
          </div>
        </div>
        <div class="scroll__btn">
          <a href="#"><img src="img/arrow-down.svg" alt="" /></a>
        </div>
      </section>

      <section class="page-section contacts">
        <div class="container">
          <h3 class="title contacts__title">Контакты</h3>
          <div class="contacts__inner">
            <div class="contacts__info">
              <div class="contacts__info-box">
                <p class="contacts__info-title">Киев</p>
                <a href="tel:80505676767" class="contacts__info-phone"
                  >+8 (050) 567 – 67 – 67</a
                ><a
                  href="mailto:dgi.mavic2pro.kiev@mail.ru"
                  class="contacts__info-email"
                  >dgi.mavic2pro.kiev@mail.ru</a
                >
              </div>
              <div class="contacts__info-box">
                <p class="contacts__info-title">Москва</p>
                <a href="tel:74995676767" class="contacts__info-phone"
                  >+7 (499) 567 – 67 – 67</a
                ><a
                  href="mailto:dgi.mavic2pro.moscow@mail.ru"
                  class="contacts__info-email"
                  >dgi.mavic2pro.moscow@mail.ru</a
                >
              </div>
              <div class="contacts__info-box">
                <p class="contacts__info-title">Минск</p>
                <a href="tel:375175676767" class="contacts__info-phone"
                  >+3 (7517) 567 – 67 – 67</a
                ><a
                  href="mailto:dgi.mavic2pro.minsk@mail.ru"
                  class="contacts__info-email"
                  >dgi.mavic2pro.minsk@mail.ru</a
                >
              </div>
            </div>
            <div class="contacts__form">
              <form action="/">
                <h4 class="contacts__form-title"></h4>
                <p class="contacts__form-text"></p>
                <div class="contacts__form-line">
                  <input
                    type="text"
                    class="contacts__form-input"
                    placeholder="Ваше имя"
                  />
                  <input
                    type="text"
                    class="contacts__form-input"
                    placeholder="Ваше e-mail"
                  />
                </div>
                <textarea
                  class="contacts__form-textarea"
                  placeholder="Что вас интересует"
                ></textarea>
                <button class="contacts__form-btn" type="submit">
                  ОТПРАВИТЬ
                </button>
              </form>
            </div>
            <ul class="contacts__social-list">
              <li class="contacts__social-item">
                <a href="#" class="contacts__social-link">
                  <img src="img/facebook.svg" alt="alt" />
                </a>
              </li>
              <li class="contacts__social-item">
                <a href="#" class="contacts__social-link">
                  <img src="img/youtube.svg" alt="alt" />
                </a>
              </li>
              <li class="contacts__social-item">
                <a href="#" class="contacts__social-link">
                  <img src="img/instagram.svg" alt="alt" />
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="scroll__btn">
          <a href="#"><img src="img/arrow-down.svg" alt="" /></a>
        </div>
      </section>
    </main>
    @@include('_footer.html')
    <script src="js/script.min.js"></script>
  </body>
</html>

@font-face {
  font-family: "SFProDisplay";
  font-display: swap;
  src: url("../fonts/SFProDisplay-Regular.woff") format("woff"), url("../fonts/SFProDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "SFProDisplay";
  font-display: swap;
  src: url("../fonts/SFProDisplay-Semibold.woff") format("woff"), url("../fonts/SFProDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
}

body {
  font-family: "SFProDisplay";
  min-width: 320px;
  overflow-x: hidden;
  position: relative;
  color: #ffffff;
  margin: 0;
}

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

.page-section {
  height: 100vh;
  background-image: url("../img/section-bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  padding: 74px 0 50px;
}

.scroll__btn {
  padding: 13px 0 30px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.webp .page-section { background-image: url(../img/section-bg.webp); }

Answer 1

使用您的 css 添加此规则：

.container {
    display: inline-block;
}

并替换 .page-section 选择器中 min-height: 100vh 处的规则 height: 100vh。像这样：

.page-section {
    min-height: 100vh;
    ...
}

部分之间的工件边距

Artifact margin between sections

html

css

space

margin

padding