2
respostas

[Dúvida] Após alterar o padding da classe, um espaço foi criado no footer

Olá, pessoal! Tudo bem?

Depois que alterei o padding da classe .apresentacao de 8% para 5%, a parte do footer fica com um espaçamento como podem ver na imagem: https://drive.google.com/file/d/1cUEEwqFUSNl5zpbV9Jo9rdLnmQNjU8U4/view?usp=share_link Gostaria de entender porque isso acontece e como resolver.

HTML:

</head>
<body>
    <header class="cabecalho">
      <nav class="cabecalho__menu">
        <a class="cabecalho__menu__link">Home</a>
        <a class="cabecalho__menu__link">Sobre Mim</a>
      </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo"><strong class="titulo-destaque">Transmitindo a essência</strong> da sua marca através do design gráfico</h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Carol Kobayashi, Design Gráfico com foco em desenvolvimento de identidades visuais. Ajudo pequenos e grandes negócios a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao__conteudo__links">
                <h2 class="apresentacao__conteudo__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__conteudo__links__link" href="https://www.behance.net/carolkobayashi">
                    <img src="./assets/behance-32.png" alt="Logo do Behance">
                    Behance
                </a>
                <a class="apresentacao__conteudo__links__link" href="https://www.instagram.com/cmkdesignbr/">
                    <img src="./assets/instagram-32.png" alt="Logo do Instagram">
                    Instagram
                </a>
                <a class="apresentacao__conteudo__links__link" href="https://api.whatsapp.com/send/?phone=5513991275861">
                    <img src="./assets/whatsapp-32.png" alt="Logo do WhatsApp">
                    WhatsApp
                </a>
            </div>
        </section>
        <img src="./assets/carol.png" alt="Foto da Carol Kobayashi sorrindo ">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Tainah Santi</p>
    </footer> 
</body>
</html>

CSS - Se eu altero o padding do cabecalho para 3% fica normal

.cabecalho {
    padding: 2% 0% 0% 15%;  
}

.cabecalho__menu{
    display: flex;
    gap: 80px
}

.cabecalho__menu__link{
    font-family: 'Adolphus', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #9D00F4;
}

.apresentacao {  **Alterei de 8% para 5%**
    padding: 5% 15%; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 


.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: 'Adolphus', sans-serif;
}


.rodape{
    padding: 24px;
    background-color: #9D00F4;
    color: #edebec;
    font-family: 'Neris', sans-serif;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
}
2 respostas

usa esse codigo no começo do css que ele zera todos os espaços que vem por padão do html

  • { padding: 0; margin: 0; box-sizing: 0; }

e ver se da certo

Siim, ele já está desta forma:

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

Mas ainda sim o espaçamento continua :/

Fiz uma alteração na proporção do padding da classe .cabecalho para 3% e foi... Mas ainda não entendo 100% o porque desse espaço no final do footer