CODEWITHSUNDEEP
htmlcss
thadeuszlay
thadeuszlay

Reputation: 3015

What is the space between the sections in HTML?

I've got this HTML structure:

<body cz-shortcut-listen="true">
    <div id="panels">
        <section id="sect0" name="lvl0">
            <div id="divLvel0" class="level zero">
                <h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2>
            </div>
        </section>
        <section id="sect1" name="lvl1">
            <div id="divLvel1" class="level one">
                <div id="panel_lvl1">
                    <h2>Languages</h2>
                </div>
            </div>
        </section>
        <section id="sect2" name="lvl2">
        </section>
        <section id="sect3" name="lvl3">
            <div id="divLvel3" class="level three">
                <div id="panel_lvl3">
                    <h2>Milestones</h2>
                    <div id="chart3">
                    </div>
                </div>
            </div>
        </section>
        <section id="sect4" name="lvl4">
            <div id="divLvel4" class="level four">
                <div id="panel_lvl4">
                    <h2>Details</h2>
                    <div id="chart4">
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>

https://jsfiddle.net/thadeuszlay/Lkdo5xv3/2/

Every section touch each other directly, i.e. there is no additional element in between the sections. But somehow you can see a gap (the green background color) between each section.

I already set the padding and the margin of the body to zero. Also I replaced the sections with DIVs. But the gap is still there.

How do I get rid of the gap and make each section touch other without a gap between them?

Upvotes: 5

Views: 19807

Answers (4)

George Katsanos
George Katsanos

Reputation: 14165

This is where the green background is coming from. What you are seeing is the body element. Imagine there are 'holes' in your layout through which you see what's behind.

where the green color is coming from

I advise you to always use a CSS Normalizer in order to harmonize and set reasonable defaults for your elements.

In your example, you need to add:

h2 { margin: 0; padding: 0}
body { margin: 0; }

as well as remove the padding of sections. Here is the working snippet:

body {
  padding: 0;
  margin: 0;
  background: green;
}
ul li {
  list-style-type: none;
  display: inline-block;
  margin-right: 10px;
}
.zero,
.one,
.two,
.three,
.four {
  padding: 40px 0;
  font-size: 20px;
}
.outer-box {
  background-color: blue;
  padding-top: 100px;
}
.zero {
  background: red;
}
.one {
  background: LightSeaGreen;
}
.two {
  background: LightGreen;
}
.three {
  background: HotPink;
}
.four {
  background: LightSteelBlue;
}
h2 {
  margin: 0;
  padding: 0;
}
<body cz-shortcut-listen="true">
  <div id="panels">
    <section id="sect0" name="lvl0">
      <div id="divLvel0" class="level zero">
        <h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2>
      </div>
    </section>
    <section id="sect1" class="outer-box" name="lvl1">
      <div id="divLvel1" class="level one">
        <div id="panel_lvl1">
          <h2>Languages</h2>
        </div>
      </div>
    </section>
    <section id="sect3" class="outer-box" name="lvl3">
      <div id="divLvel3" class="level three">
        <div id="panel_lvl3">
          <h2>Milestones</h2>
          <div id="chart3">
          </div>
        </div>
      </div>
    </section>
    <section id="sect4" class="outer-box" name="lvl4">
      <div id="divLvel4" class="level four">
        <div id="panel_lvl4">
          <h2>Details</h2>
          <div id="chart4">
          </div>
        </div>
      </div>
    </section>
  </div>
</body>

Upvotes: 1

Jhecht
Jhecht

Reputation: 4435

I was incorrect in my comment, your body had a margin and that is why you had the space around the elements.

I'm assuming you're using a browser with a similar rendering engine, and as such they sometimes have default styles that may not show up. Seems like it was the case here, just set the margin-bottom on all elements to 0 or simply just reset margins and padding on all elements and add them when you need.

* {
  margin: 0;
  padding: 0;
}
body {
  background: green;
}
.zero,
.one,
.two,
.three,
.four {
  min-height: 100vh;
  max-height: 1000px;
  font-size: 20px;
}
section {
  padding-top: 100px;
}
.zero,
.sel:nth-child(1) {
  background: red;
}
.one,
.sel:nth-child(2) {
  background: LightSeaGreen;
}
.two,
.sel:nth-child(3) {
  background: LightGreen;
}
.three,
.sel:nth-child(4) {
  background: HotPink;
}
.four,
.sel:nth-child(5) {
  background: LightSteelBlue;
}
#sect0,
#sect1,
#sect2,
#sect3,
#sect4 {
  /* The image used */
  background: blue;
}
<body cz-shortcut-listen="true">
  <div id="panels">
    <section id="sect0" name="lvl0">
      <div id="divLvel0" class="level zero">
        <h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2>
      </div>
    </section>
    <section id="sect1" name="lvl1">
      <div id="divLvel1" class="level one">
        <div id="panel_lvl1">
          <h2>Languages</h2>
        </div>
      </div>
    </section>
    <section id="sect2" name="lvl2">
    </section>
    <section id="sect3" name="lvl3">
      <div id="divLvel3" class="level three">
        <div id="panel_lvl3">
          <h2>Milestones</h2>
          <div id="chart3">
          </div>
        </div>
      </div>
    </section>
    <section id="sect4" name="lvl4">
      <div id="divLvel4" class="level four">
        <div id="panel_lvl4">
          <h2>Details</h2>
          <div id="chart4">
          </div>
        </div>
      </div>
    </section>
  </div>
</body>

Upvotes: 0

Wim Mertens
Wim Mertens

Reputation: 1790

Add padding and margin 0. In addition change your html to this:

<section></section><!--
--><section></section>

Or in one line:

<section></section><section></section>

Upvotes: -1

Abood
Abood

Reputation: 570

reset padding and margin for all objects at the start of your style

* {
margin:0;
padding:0;
}

after that you can set padding and margin as you want for each object

Upvotes: 10

Related Questions