Why are there gaps between the elements?

This question came to me as I did the exercise Build a Tribute Page.
Why are there gaps between the elements? For the purpose of this question, I colored the backgrounds of these elements for better visualization of the issue. From my understanding, if I set margin to 0 then these elements should be “glued” together with no gaps between them but that is not what happens when i swap auto to 0 in CSS:

What exactly is causing that white gap and how to prevent it?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Tribute Page practice project" />
    <title>Tribute Page</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
      <main id="main">
          <section id="tribute-info"><h3>Timeline of his life with his greatest achievements:</h3></section>
            <div id="tribute-list">
                <ul>
                    <li><span id="bold">1980</span> - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "</li>
                    <br>
                    <li><span id="bold">1985</span> - He did ...</li>
                    <br>
                    <li><span id="bold">1990</span> - He did ...</li>
                    <br>
                    <li><span id="bold">1992</span> - He did ...</li>
                    <br>
                    <li><span id="bold">1993</span> - He did ...</li>
                </ul>
            </div>
            <div id="footer"><h3>You can find out more about this great man <a id="tribute-link" target="_blank" href="https://www.freecodecamp.org">here.</a></h3></div>
      </main>
  </body>
</html>
*, *::before, *::after {
  box-sizing: border-box;
}

body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  text-align: center;
}


#bold{
  font-weight: 600;
  letter-spacing: 2px;

}

#tribute-info{
  text-align: center;
  color: rgb(66, 66, 66);
  padding: 20px 0;
  max-width: 600px;
  min-width: 10vw;
  padding: 50px 0 40px 0;
  background-color: rgb(255, 0, 0);
  margin: auto;

}

#tribute-list{
  text-align: justify;
  color: rgb(66, 66, 66);
  padding: 0px 28px 0px 0px;
  max-width: 600px;
  min-width: 10vw;
  background-color: rgb(255, 102, 0);
  margin: auto;

}

#footer{
  color: rgb(66, 66, 66);
  padding: 8px 0;
  background-color: rgb(217, 255, 0);
  max-width: 600px;
  min-width: 10vw;
  margin: auto;
}

I believe you have to “reset” the default values of padding and margin.

Usually browsers have default values for them, so, even if you write margin: 0 and padding: 0 to your elements the default value is still applied.

To do that use:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Usually, when working with vanilla CSS you want to make this reset, so it’s easier to format your elements!

Try this and let me know if it worked!

1 Like

Hi @Landoro

It is the heading and unordered list elements adding to the margins.
Try changing the heading elements to article elements, then styling the article.

Then place break elements before and after the unordered list.

The suggestion from @wilsond_barbosa will also work.

Happy coding

1 Like

Thank you, I will get into the habit of doing this from now on!

2 Likes