Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não entendi muito bem box-sizing: border-box;

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Criando uma nova página e atividade Introdução

por João Victor Guimarães da Silva
| 42.2k xp | 13 posts

Eu não entendi muito bem a funcionalidade do box-sizing: border-box;.

.produto li {
    display: inline-block;
    text-align: center;
    border: 2px solid black;
    border-radius: 20px;
    width: 30%;
    vertical-align: top;
    padding: 30px 20px;
    box-sizing: border-box;
    margin: 1.5%;
}
1 resposta
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai João, tudo bem? O box-sizing informa como o navegador deve calcular as dimensões dos elementos na página, exemplo:

height: 100px;
width: 100px;
padding: 10px;

Nesse exemplo a largura final seria 120px e altura 120px, isso seria os 100 das dimensões e 10px de espaçamento interno na dimensões do mesmo.

height: 100px;
width: 100px;
padding: 10px;
box-sizing: border-box;

Aqui a largura e altura final será 100px mesmo, a gente falou que o cálculo deve ser feito até a borda.

Espero ter ajudado.