1
resposta

[Dúvida] porque usar margin na classe <div em vez da section ? ambas possuem as mesmas tags dentro

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura plus</title>
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <section class="container principal">
        <div class="container__caixa">
            <h1 class="container__titulo  ">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img src="img/Combo.png" alt="O combo+ é a junção do alura+ e o alura lingua" class="container__imagem">
            <a href="www.alura.com.br" class="container__botao"> Assine por 12x de R$120,00</a>
            <a href="www.alura.com.br" class="container__botao botao__secundario">Assinar somente com o Alura+</a>
            <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos </p>
        </div>
    </section>
</body>
</html>
1 resposta

Olá Jessica, tudo bem?

No caso do seu código, a classe "container__caixa" está dentro da "section" com a classe "container principal". Se você utilizar a propriedade "margin" na classe "section", ela irá afetar todo o conteúdo dentro dela, incluindo a "div" com a classe "container__caixa", a section da classe "container principal" vai ser um padrão, os estilos CSS dela define se a seção está ocupando a largura total da tela, e vai se repetir em outras section que a instrutora vai criar no decorrer do curso. Por isso plicou a margin no elemento filho "container__caixa".

Nesse caso é recomendado utilizar a propriedade "margin" na classe "container__caixa", para definir o espaçamento entre ela e os outros elementos. Assim, você tem mais controle sobre o espaçamento e evita afetar outros elementos que possam estar dentro da "section".

Espero ter ajudado e bons estudos!