1
resposta

[Dúvida] Margens nos elementos do ul

Estou criando uma seção que mostra os produtos que são oferecidos pela empresa. Usei um div usando flexbox e coloquei três ul. Acontece que as imagens estão criando margens à direita, alterando o espaço entre as imagens que eu buscava. Como posso resolver?

HTML

   ` <section class="nossos_produtos">
        <div class="nossos_produtos_geral">
            
            <ul class="nossos_produtos_cozinhas">
                <li><img class="nossos_produtos_cozinhas_cozinha" src="/imgs/cozinha-serviço.png"></li>
                <li><p class="nossos_produtos_cozinhas_texto">Cozinhas</p></li>
            </ul>

            <ul class="nossos_produtos_closets">
                <li><img class="nossos_produtos_closets_closet" src="/imgs/closet-serviço.png"></li>
                <li><p class="nossos_produtos_closets_texto">Closets</p></li>
            </ul>

            <ul class="nossos_produtos_quartos">
                <li><img class="nossos_produtos_quartos_quarto" src="/imgs/quarto-serviço.png"></li>
                <li><p class="nossos_produtos_quartos_texto">Quartos</p></li>
            </ul>
        </div>
       </section>`

CSS

.nossos_produtos_geral{
    padding: 1% 0 1% 3%;
    
    display: flex;
    justify-content: flex-start;

    max-width: 90%;
}

.nossos_produtos_cozinhas{
    display: inline-block;
    position: relative;
}

.nossos_produtos_cozinhas_cozinha{
    display: block;
    position: relative;
    width: 90%;
}

.nossos_produtos_cozinhas_texto{
    position: absolute;

    bottom: 4%;
    left: 56%;

    font-size: 200%;
    color: var(--cor-secundaria);
    text-transform: uppercase;
}

.nossos_produtos_closets{
    display: inline-block;
    position: relative;
}

.nossos_produtos_closets_closet{
    display: block;
    position: relative;
    width: 90%;
}

.nossos_produtos_closets_texto{
    position: absolute;

    bottom: 4%;
    left: 60%;

    font-size: 200%;
    color: var(--cor-secundaria);
    text-transform: uppercase;
}

.nossos_produtos_quartos{
    display: inline-block;
    position: relative;
}

.nossos_produtos_quartos_quarto{
    display: block;
    position: relative;
    width: 90%;

}

.nossos_produtos_quartos_texto{
    position: absolute;

    bottom: 4%;
    left: 58%;

    font-size: 200%;
    color: var(--cor-secundaria);
    text-transform: uppercase;
}
1 resposta

Olá, Marcelly! Como vai?

Fiz testes com o seu código, onde apenas substitui as imagens (o que não deve alterar o código). Acredito que as margens que você citou são as áreas em vermelho da imagem abaixo, correto?

Imagem do resultado do código HTML e CSS da aluna..

Isso se dá por conta do atributo width: 90% nas imagens. Para corrigir isso, você pode mudar o valor para 100% ou simplesmente apagar esse atributo.

Espero que isso ajude. Até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!