Как правило, в CSS, когда родитель и его последний дочерний элемент имеют поле, поля сжимаются, создавая единое поле. Например
article {
margin-bottom: 20px
}
main {
background: pink;
margin-bottom: 20px;
}
footer {
background: skyblue;
}
<div id="container">
<main>
<article>
Item 1
</article>
<article>
Item 2
</article>
</main>
<footer>Footer</footer>
</div>