Ir para conteúdo
Fórum Script Brasil
  • 0

Não criar espaço entre as imagens dentro de uma <div> <sector> <ol> <li>.


Wesley Coelho

Pergunta

Olá sou novo no mundo do desenvolvimento. Estou seguindo os passos do projeto, fiz conforme informado, mas está dando erro.

Projeto da Caelum -> Mirror Fashion

HTML

<div class="container paineis">
 
        <section class="painel novidades">
            <h2>Novidades</h2>
            <ol>
                <li>
                    <a href="produto1.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura1.png" alt="miniatura1">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto2.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura2.png" alt="miniatura2">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto3.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura3.png" alt="miniatura3">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto4.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura4.png" alt="miniatura4">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto5.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura5.png" alt="miniatura5">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto6.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura6.png" alt="miniatura6">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
 
        </section>
 
        <section class="painel mais-vendidos">
            <h2>Mais Vendidos</h2>
            <ol>
                <li>
                    <a href="produto1.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura7.png" alt="miniatura7">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto2.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura8.png" alt="miniatura8">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto3.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura9.png" alt="miniatura9">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto4.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura10.png" alt="miniatura10">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto5.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura11.png" alt="miniatura11">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="produto6.html">
                        <figure>
                            <img src="mirrorfashion/img/produtos/miniatura12.png" alt="miniatura12">
                            <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
 
        </section>
    </div>

 

CSS

CSS

 
.painel li {
    displayinline-block;
    vertical-aligntop;
    width120px;
    margin-2px;
    padding-bottom10px;
    }
 
.painel {
    margin10px 0;
    padding10px;
    width445px;
    }
 
.painel h2 {
    font-size24px;
    font-weightbold;
    text-transformuppercase;
    margin-bottom10px;
}
 
.painel a {
    color#333;
    font-size14px;
    text-aligncenter;
    text-decorationnone;
}
 
.novidades {
    floatleft;
    background-color#F5DCDC;
}
 
.mais-vendidos {
    floatright;
    background-color#DCDCF5;
}
 
figure {
    margin10px;
    padding-right30px;
}
 
figcaption {
    font-styleitalic;
    font-size10px;
}

Como está:

image.png.5bdf448393d4a0b80f64246fed402fda.png

Como deveria ficar:

image.png.246a978b266720c242a134b89ff0b2c1.png

Podem me dar um help?

 

 
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

 

Em 25/04/2021 em 21:32, Wesley Coelho disse:
.painel li {
    displayinline-block;
    vertical-aligntop;
    width120px;
    margin-2px;
    padding-bottom10px;
    }

remova o -bottom

Editado por wash
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...