Entrar Ainda não tem acesso?
2
respostas

Terceira caixa menor do que as duas primeiras

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Lidando com bordas e atividade Bordas arredondadas

por Magno
| 97.4k xp | 11 posts
ESPECIALISTA ADMINISTRATIVO

A última caixa está menor do que as duas outras; Sei que o problema é por causa de ter menos linhas dos que nos dois primeiros boxes. Mas não tem uma forma "inteligente" dele considerar a mesma medida? Eu coloquei height: 420px, mas sinto que essa não seja a melhor solução;

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

.produtos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    /* height: 420px; */
    vertical-align:middle;
    /* background: #CCCCCC; */
    margin: 0 1.5%;
    padding: 30px 10px;
    /* Estava => padding: 30px 20px; */
    box-sizing: border-box;
    /* border-width: 2px;
    border-style: solid;
    border-color: #000000 */
    border: 2px solid #000000;
    border-radius: 10px;
}
2 respostas
por Fábio Santiago
| 118.8k xp | 2 posts

Boa noite Magno, se você diminuir a largura (width para 29%) as caixas ficam do mesmo tamanho.

.produtos li{
    display: inline-block;
    text-align: center;
    width: 29%;
    vertical-align:middle;
    margin: 0 1.5%;
    padding: 30px 10px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}
por junio henrique de souza silva
| 31k xp | 4 posts

A terceira caixa é a única que não tem quebra de linha, eu tive o mesmo problema, então eu apenas aumentei a descrição da terceira caixa, exemplo:

"Serviço completo de barba cabelo e bigode"

Dessa forma, houve a quebra de linha e as caixas ficaram em tamanho iguais.