Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] DIFERENÇA ENTRE BORDER BOX E CONTENT BOX

No nosso projeto, para garantir que os 'fillhos'' do body estejam sempre dentro dela usamos no CSS o recurso do box sizing: border box;

Mas conforme temos o exemplo na aula, no arquivo do mozila temos três diferentes formas de box sizing, a outra seria o content box aonde o child container se encontra dentro do parent container.

Nesse caso, qual seria a diferença na prática, entre o border box e content box? Porque, visualmente falando temos que no content box o conteudo não tem uma borda em volta, já no border, está borda está presente.

No caso do nosso projeto, eu testei colocando o content box para ver se iria mudar alguma coisa, mas não mudou nada.

2 respostas
solução!

Olá, Juliana!

A diferença entre o box sizing "border-box" e "content-box" está na forma como o tamanho total do elemento é calculado.

Quando você utiliza o "border-box", o tamanho total do elemento inclui a largura e a altura do conteúdo, juntamente com as bordas e o preenchimento interno. Isso significa que, ao definir a largura e a altura de um elemento, o preenchimento e as bordas não serão adicionados ao tamanho total. O conteúdo ficará dentro dessas bordas e preenchimento.

Por outro lado, quando você utiliza o "content-box", o tamanho total do elemento é calculado apenas com base no conteúdo, sem levar em consideração as bordas e o preenchimento. Isso significa que, ao definir a largura e a altura de um elemento, o preenchimento e as bordas serão adicionados ao tamanho total.

No seu caso, como você mencionou que testou o "content-box" e não percebeu nenhuma diferença, pode ser que o elemento em questão não tenha bordas visíveis ou preenchimento definido, fazendo com que a diferença entre os dois box sizing não seja aparente visualmente.

Você pode dar uma conferida nesse artigo para saber mais.

Espero ter ajudado!

Bons estudos.

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

Okay! Entendi, obrigada pelo esclarecimento.