Entendo melhor o comportamento de margin, e dos elementos HTML. | HTML5 e CSS3 parte 4: avançando no CSS

Olá pessoal, finalizando essa etapa do treinamento, o instrutor recomendou cria outras páginas para consolidar o treinamento.

Considerando o código a baixo, fiz uma etiqueta de nome "Estudos" dentro da nossa main, e main possui uma cor background: #d4d4d4;.

Quando apliquei um margin, para cima e para baixo na etiqueta "Estudos", abriu um espaço branco entre o "header" e "main", e entre "main" e "footer".

Eu esperava que independe da margem a cor de fundo do "main" acompanharia esse espaço. Gostaria de entender melhor isso, pois não foi muito intuitivo, uma vez que a margem foi no elemento "section" dentro do "main", e por tanto a cor de fundo deveria preencher também as margens.

HTML.


<!DOCTYPE html>

<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Barbearia Alura</title>

        <link rel="stylesheet" href="folha de estilo/reset.css">
        <link rel="stylesheet" href="folha de estilo/style.css">

        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="https://placehold.it/177x250" alt="Logo da Barbearia Alura"></h1>

                <nav>
                    <ul>
                        <li><a href="#">Home</a></li><!--
                     --><li><a href="#">Produtos</a></li><!--
                     --><li><a href="#">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <section class="tag tag-estudos">
                <h2 class="tag__titulo">Estudos</h2>
            </section>
        </main>

        <footer>
            <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
        </footer>
    </body>
</html>

CSS.


body {
    font-family: 'Montserrat', sans-serif;
    background: #f4f4f4;
}

header {
    background: #bbbbbb;
    padding:20px 0 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

h1 {
    display: inline;
}

nav {
    display: inline-block;
    margin-left: 299px;

}

nav li {
    display: inline;
}

nav a {
    display: inline-block;
    background: #539be1;
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    padding: 20px;
    border: 1px solid;
}

nav a:hover {
    color: #c78c19;
    text-decoration: underline;
}

main {
    width: 940px;
    margin: 0 auto;
    background: #d4d4d4;
}

.tag-estudos {
    background: #dfc971;
}

.tag {
    margin: 40px 0; /* essa margem abre um espaço no main*/
    width: 181px;
    text-align: center;
    border-radius: 0 10px 10px 0;
}

.tag__titulo {
    color: #4d4d4d;
    padding: 12.5px 0px;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

footer {
    background: #333333;
    text-align: center;
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}


.banner {
    width: 100%;
}

Obrigado!

Mergulhe em programação