2
respostas

[Dúvida] Margem não inserida no projeto

Boa noite, Pessoal

No Projeto do Professor consta essa margem (grifada abaixo) eu revisei toda aula e não achei como coloco essa margem, podem me ajudar?

Obrigada! Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Boa noite! Ana

Não é margem

Foi usado "padding" de 50px na class "produtos"

+HTML


<ul class="produtos">
    <li>
        <h2>Cabelo</h2>
        <img src="cabelo.jpg">
        <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
        <p class="produto-preco">R$ 25,00</p>
    </li>
    <li>
        <h2>Barba</h2>
        <img src="barba.jpg">
        <p class="produto-descricao">Corte e desenho profissional de barba</p>
        <p class="produto-preco">R$ 18,00</p>
    </li>
    <li>
        <h2>Cabelo + Barba</h2>
        <img src="cabelo+barba.jpg">
        <p class="produto-descricao">Pacote completo de cabelo e barba</p>
        <p class="produto-preco">R$ 35,00</p>
    </li>
</ul>
  • CSS

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

Luis boa noite.

Isso mesmo, eu tinha escrito errado :(.

Agora deu certo.

Obrigada