3
respostas

Section receitas com padding-bottom não declarado

Enquanto fazia o Arquitetura CSS:aula 3 eu percebi que em alguns blocos da class="receitas" estavam recebendo um padding bottom e outras simplesmente usando os que eu declarava. O que pode ser de errado ? e como padronizar esse padding em todos os div.receita?

codigo CSS usado:

.receitas{
    background-color: #e5e5e5;
    display: flex;
    flex-wrap: wrap;
    padding: 5rem 0 0 5rem;
}
.receita{
    background-color: #fdfdfd;
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
    margin-right: 5rem;
    width: calc(25% - 5rem);
}
.receita__imagem{
    height: 150px;
}
.receita__titulo{
    font-size: 1.43rem;
}
.receita__descricao{
    font-size: 1.18rem;
    line-height: 1.5;
    text-align: justify;

}
.receita__conteudo{
    padding: 1rem;
}
.receita__botao{
    background-color: #8d0606;
    border: none;
    border-radius: 5px;
    color: #fdfdfd;
    padding: 1rem;
    transition: all .1s ease-in-out;
}
.receita__botao:hover{
    cursor: pointer;
    background-color: #620404;
}
3 respostas

Fala ai Lucas, tudo bem? Não sei se entendi a dúvida, consegue dar mais detalhes ou enviar prints?

Eles já estão padronizados com um margin-bottom: 5rem, isso porque o bloco receitas não tem margin ou padding em baixo.

Espero ter ajudado.

É que alguns blocos dessa div estão com espaçamento abaixo que eu não coloquei, e alguns tem só se eu declarar. Como se automaticamente tivesse um padding-bottom.

Fala Lucas, verifica se não faltou importar o normalize.css no projeto ou fazer algum reset para remover os espaços internos e externos do ul e li.

Espero ter ajudado.