What is the distance between the different segments in HTML code?

Question

What is the distance between the different segments in HTML code?

I have the following 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/

Each section is directly adjacent to the other sections without any additional elements in between, but there is a visible gap (shown with green background color) between them.

Despite setting padding and margins of the body to zero and replacing sections with DIVs, the gap persists.

How can I eliminate this gap and make each section touch others seamlessly without any spaces in between?

html css

Answer 1

Answer №1

Start your style by resetting the padding and margin for all elements

* {
margin:0;
padding:0;
}

Once you've done that, feel free to customize the padding and margin for each individual element as needed

Answer 2

Start your style by resetting the padding and margin for all elements

* {
margin:0;
padding:0;
}

Once you've done that, feel free to customize the padding and margin for each individual element as needed

Answer 3

Answer №2

This is the source of the green background you are seeing, which is applied to the body element. Visualize your layout as having 'windows' that reveal what's behind them.

https://i.sstatic.net/n8nUJ.png

I recommend always incorporating a CSS Normalizer to align and establish sensible defaults for your elements.

In this particular case, you should include the following:

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

Also, remember to eliminate padding from sections. Below is an example snippet with those adjustments:

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>

Answer 4

This is the source of the green background you are seeing, which is applied to the body element. Visualize your layout as having 'windows' that reveal what's behind them.

https://i.sstatic.net/n8nUJ.png

I recommend always incorporating a CSS Normalizer to align and establish sensible defaults for your elements.

In this particular case, you should include the following:

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

Also, remember to eliminate padding from sections. Below is an example snippet with those adjustments:

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>

Answer 5

Answer №3

My earlier comment was inaccurate as your body had a margin, causing the space around the elements.

If you are using a browser with a similar rendering engine, default styles may not display correctly. It appears that was the issue here. Ensure to set the margin-bottom on all elements to 0 or reset margins and padding on all elements and add them as needed.

* {
  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>

Answer 6

My earlier comment was inaccurate as your body had a margin, causing the space around the elements.

If you are using a browser with a similar rendering engine, default styles may not display correctly. It appears that was the issue here. Ensure to set the margin-bottom on all elements to 0 or reset margins and padding on all elements and add them as needed.

* {
  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>

Answer 7

Answer №4

Ensure padding and margin are set to 0. Also, update your HTML code as follows:

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

Alternatively, you can do it in a single line like this:

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

Answer 8

Ensure padding and margin are set to 0. Also, update your HTML code as follows:

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

Alternatively, you can do it in a single line like this:

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

What is the distance between the different segments in HTML code?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Completely triggering a forced refresh on a single page application, disregarding cache, service workers, and all other

Update the event binding for a button with jQuery

Interactive div containing elements that cannot be clicked

Scrolling to a specific anchor in a React webpage when the URL is opened in

Utilizing Font Awesome icons within a JSON structure

Tips for pausing keyframes animation on its final animation frame

enclosing the pre tag within a table cell

Tips for changing an input value when clicked using JQuery

"Div does not perfectly match the height of its parent div when using the 'inherit' value

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

SharePoint 2013 on a mobile device does not support scrolling within iframes

How can I make the item's image field optional using HTML and CSS?

Custom 404 Page by Google

Prevent click event listener from activating if the click results in a new tab or window being opened

Developing a Highchart Graph using JavaScript

Enabling HTML elements in a postback operation

Add a line break tag (<br>) specifically for devices with a width less than 768 pixels

"Struggling with vertical alignment in my scenario, any tips on how to achieve

Behavior of Bootstrap Modal When Closing

What could be causing my HTML button to malfunction when attempting to navigate to a different section of the webpage?