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;
}