Промежутки между элементами раздела HTML

Я не уверен, почему это происходит, но по какой-то причине между некоторыми элементами <section> в макете, над которым я работаю, есть промежутки.

В настоящее время у меня есть 3 отдельных раздела:

<section class="top">
  <div class="wrapper">
    <h2>Top Section</h2>
    </div>
 </section>
 <section class="middle">
    <div class="wrapper">
      <h2>Middle Section</h2>
     </div>
  </section>
  <section class="lower">
     <div class="wrapper">
       <h2>Lower section</h2>
     </div>
  </section>

CSS (для .wrapper) - нет другого CSS для section:

.wrapper {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

И тогда это результат:

введите здесь описание изображения

У меня нет ul или какой-либо другой разметки, и когда я проверяю каждый раздел, не отображаются ли какие-либо поля или отступы. Я использую Bootstrap, но не думаю, что это испортит разделы.

ОДНАКО...если я добавлю:

* {
  overflow: auto;
}

Это исправит это, и пробелы исчезнут.

Итак, с учетом сказанного, нужно ли мне нужно иметь overflow: auto в моем CSS, чтобы "уничтожить" промежутки с элементами разделов? Не вызовет ли это проблем с другими элементами, которые я добавляю в каждый раздел? Кажется странным, что мне нужно будет добавлять каждый элемент section, чтобы компенсировать какое-то шаткое поведение с браузером или Bootstrap? Я никогда раньше не видел этого при использовании элементов section таким образом, поэтому я склонен полагать, что это может быть Bootstrap, который возится с вещами.


html css sections
person ultraloveninja    schedule 27.07.2018    source источник
comment
Можете ли вы опубликовать раздел head вашей страницы?   -  person Unmitigated    schedule 27.07.2018

Ответы (1)


arrow_upward
2
arrow_downward

h2 имеет определяемый браузером базовый стиль для margin-top и margin-bottom. Установите для них значение 0, чтобы устранить проблему.

.wrapper {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

section {
  background-color: lightgray;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
}
<section class="top">
  <div class="wrapper">
    <h2>Top Section</h2>
  </div>
</section>
<section class="middle">
  <div class="wrapper">
    <h2>Middle Section</h2>
  </div>
</section>
<section class="lower">
  <div class="wrapper">
    <h2>Lower section</h2>
  </div>
</section>

person J. Titus    schedule 27.07.2018
comment
Ну, черт. Да, это было так. Тьфу... вы могли бы думать, что это будет удалено с помощью Normalize/Reset... но я думаю, что нет. Спасибо! - person ultraloveninja; 27.07.2018