[Projeto] Exercício footer alura+

No desafio eu coloquei duas vezes a margin no rodape pois quando coloquei a margin como 6em ficou bom nas laterais, mas na distancia do footer para a ultima section eu quis aumentar pois senti que estavam muito perto então usei margin-top para não mexer nas laterais, consigo fazer isso usando so o margin?? eu tentei mas não consegui.
HTML

 <footer class="rodape">
        <img src="Img/Logo.png" alt="logo alura+" class="rodape__logo">
        <ul class="rodape__lista">
            <li class="lista__link">
                <a href="#">Idioma</a>
            </li>
            <li class="lista__link">
                <a href="#">Dispositivos compatíveis</a>
            </li>
            <li class="lista__link">
                <a href="#">Contrato de assinatura</a>
            </li>
            <li class="lista__link">
                <a href="#">Politica de privacidade</a>
            </li>
            <li class="lista__link">
                <a href="#">Proteção de dados no Brasil</a>
            </li>
            <li class="lista__link">
                <a href="#">Anuncios personalizados</a>
            </li>
            <li class="lista__link">
                <a href="#">Ajuda</a>
            </li>
        </ul>
        <p class="rodape__texto">® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
        <p class="rodape__texto">Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
    </footer>

CSS

.rodape {
    text-align: center;
    margin: 6em;
    margin-top: 8em;
    
}
.rodape__lista {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 2em;
}
.lista__link a {
    font-size: 16px;
    color: var(--branco-principal);
    text-decoration: none;
    margin: 1em;
}
.rodape__texto{
    font-size: 14px;
    color: var(--cinza-secundario);
    margin: 2em;
}

Oi, Stephanie, como vai?

É possível simplificar a declaração utilizando a propriedade shorthand do CSS para a margem. Quando você utiliza apenas margin com um valor, ele se aplica aos quatro lados, mas você pode passar até quatro valores diferentes em uma única linha para controlar cada direção individualmente seguindo a ordem: topo, direita, baixo e esquerda.

No seu caso, para manter o distanciamento lateral que você gostou e definir um topo diferente, a sintaxe seria margin: 8em 6em 6em 6em. Note que o primeiro valor corresponde ao top, o segundo à right, o terceiro ao bottom e o quarto à left. Se você quiser que o topo seja 8em, as laterais sejam 6em e a parte inferior também 6em, você também pode usar a forma com três valores: margin: 8em 6em 6em.

Seu código está muito bem executado e a lógica aplicada na estilização da lista e dos links demonstra um ótimo entendimento de Flexbox e seletores. Parabéns pelo empenho no desenvolvimento do projeto e por compartilhar sua evolução. O fórum está à disposição.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

[Projeto] Exercício footer alura+

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema