3
respostas

Problema para espaçar as figuras

Tive problemas para criar espaço entre as figuras. Segui o mesmo código do professor, mas não deu certo.

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

Segue o código:

HTML

<!DOCTYPE html>

<html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>

        <body>

            <header>
                <div class="caixa"> 
                    <h1><img src="logo.png"></h1>

                    <nav>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="produtos.html">Produtos</a></li>
                            <li><a href="contato.html">Contato</a></li>
                        </ul>
                    </nav>
                </div>
            </header>

            <main>
                <ul class="produtos">
                    <li>
                        <h2>Cabelo</h2>
                        <img src="cabelo.jpg">
                        <p class="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="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="descricao">Pacote completo de cabelo e barba</p>
                        <p class="produto-preco">R$35,00</p>
                    </li>
                </ul>
            </main>

            <footer>
                <img src="logo-branco.png" alt="">
                <p class="copyright">&copy; Copyright - Barbearia Alura 2022</p>
            </footer>
        </body>
</html>        

CSS

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

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

nav {
    position: absolute;
    top: 110px;
    right: 0px;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none ;
}

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

.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 darkred;
    border-radius: 10px;
}    

.produtos li:hover {
    border-color: black;
    border-width: 5px;
}

.produtos li:active {
    border-color: lightgreen;
}

.produtos li:hover h2 {
    font-size: 34px;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

footer {
    text-align: center;    
    background:url("bg.jpg");
    padding: 40px 0;
}

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

Olá, Alan.

Tudo bem?

O seu código está certinho exceto por uma vírgula a mais que você colocou para separar os atributos da margin depois do zero: margin: 0, 1.5%; na .produtos li. No caso não precisa colocar vírgula e sim um espaço. Corrigido: margin: 0 1.5%;

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

Espero ter ajudado.

Qualquer dúvida manda aqui de novo :)

Valeu!!

Boa noite Renan.

Entrei no código meu pra este possível erro que você apontou, ele já estava corrigido. Essa vírgula deve ter sido alguma medida desesperada pra ver se resolvia, mas nada. Mesmo sem a vírgula mencionada, o espaçamento entre os produtos continua errado, logo o problema ainda é existente!

Estranho hein, eu copiei o seu código e estava assim pra mim, ai eu apaguei essa vírgula ele ficou certo, assim:

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