Entrar Ainda não tem acesso?
5
respostas

Borda diferente

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

por Estudante
| 19.3k xp | 10 posts

Minha borda do canto direito saiu menor do que as outras duas e não consegui identificar onde está o erro. Alguém pode me ajudar?

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}
.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}
.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}
.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}
.produto-descricao {
    font-size: 18px;
}
.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}
.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}
.produto-descricao {
    font-size: 18px;
}
.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas
por Luiz Henrique Costa da Silva
| 145.6k xp | 42 posts
Desenvolvedor Junior

Olá Shayra, tudo bem?

Verifica se as classes estão com o mesmo nome, lá no html. Vi também que no seu css tem código repetido.

por Gabriel Molezini Ferreira
| 76k xp | 1 posts

tente colocar o texto da barba como: "Pacote completo de cabelo e barba", pois o tamanho do texto influência no espaçamento da borda.

                <li>
                    <h2>Cabelo + Barba</h2>
                    <img src="cabelo+barba.jpg">
                    <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                    <p class="produto-preco">R$ 35,00</p>
                </li>

eu tive o mesmo problema rsrsrsrs

por Leonardo dos Santos Gomes
| 144.1k xp | 40 posts
Desenvolvedor Fullstack

Boa tarde, tudo bem? Repare no CSS que apenas a largura das caixas foi definida - em 30% do espaco disponível. Portanto, sua largura não irá se ajustar conforme a largura do seu conteúdo, ela será fixa. Já a altura das caixas não foram definidas, portanto irão se ajustar automaticamente, conforme o seu conteúdo. Note que a descrição dos dois primeiros serviços ocupam 2 linhas, enquanto a terceira cabe perfeitamente em apenas 1, dando a sensação de desalinhamento.

por Matheus Gabriel Polim da Silva
| 176.8k xp | 11 posts

Uma das possibilidades seria utilizar o <br> para pular uma linha, assim a borda vai se alinhar com as outras.

<p class="produto-descricao">Pacote completo de cabelo<br> e barba</p>

Codigo aplicado:

por Leonardo dos Santos Gomes
| 144.1k xp | 40 posts
Desenvolvedor Fullstack

Essa é a famosa gambiarra kkkkkkkkkk