Search code examples
csshtmlsections

Gaps between HTML section elements

I'm not sure why this is happening, but for some reason there are gaps between some <section> element on a layout that I am working on.

Currently I have 3 separate sections:

<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 (for the .wrapper) - have no other CSS for the section:

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

And then this is the result:

enter image description here

I don't have any ul's or any other markup in there nor when I inspect each section is there any margin or padding showing. I am using Bootstrap, but I wouldn't think that would mess with the sections.

HOWEVER...if I add:

* {
  overflow: auto;
}

That will fix it and the gaps are gone.

So with that being said, do I need to have overflow: auto in my CSS to "nuke" out the gaps with the sections elements? Will that cause issues down the line with other elements that I add into each sections? Seems strange that I would need to append each section element to compensate for some wonky behavior with the browser or Bootstrap? I've never really seen this before either when using section elements this way, so I'm inclined to believe that it might be Bootstrap messing with things.

Solution

  • h2 has a browser-specified base style for margin-top and margin-bottom. Set them to 0 to fix your issue.

    .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>