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

[Wesley Coelho]

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 {

    display: inline-block;

    vertical-align: top;

    width: 120px;

    margin: -2px;

    padding-bottom: 10px;

    }

 

.painel {

    margin: 10px 0;

    padding: 10px;

    width: 445px;

    }

 

.painel h2 {

    font-size: 24px;

    font-weight: bold;

    text-transform: uppercase;

    margin-bottom: 10px;

}

 

.painel a {

    color: #333;

    font-size: 14px;

    text-align: center;

    text-decoration: none;

}

 

.novidades {

    float: left;

    background-color: #F5DCDC;

}

 

.mais-vendidos {

    float: right;

    background-color: #DCDCF5;

}

 

figure {

    margin: 10px;

    padding-right: 30px;

}

 

figcaption {

    font-style: italic;

    font-size: 10px;

}

Como está:

Como deveria ficar:

Podem me dar um help?

 

 

[wash]

 

Em 25/04/2021 em 21:32, Wesley Coelho disse:

.painel li {

    display: inline-block;

    vertical-align: top;

    width: 120px;

    margin: -2px;

    padding-bottom: 10px;

    }

remova o -bottom

Editado Abril 28, 2021 por wash