Tarefa

Explore as diferenças práticas entre os valores content-box e border-box para a propriedade box-sizing. Sua tarefa é a seguinte:

• Aplique o valor content-box à propriedade box-sizing para o elemento com o id content-box.
• Aplique o valor border-box à propriedade box-sizing para o elemento com o id border-box.

• box-sizing: content-box: Largura e altura excluem o preenchimento (padding) e a borda.
• box-sizing: border-box: Largura e altura incluem o preenchimento (padding) e a borda.

Explicação

Neste exemplo, temos dois elementos div, cada um utilizando um valor diferente para a propriedade box-sizing:

• A primeira div possui uma borda vermelha e utiliza o valor padrão content-box para a propriedade box-sizing. Mesmo com width e height definidos como 200px, o padding e o border adicionam espaço extra, resultando em dimensões maiores que 200px em ambas as direções;
• Por outro lado, a segunda div apresenta uma borda azul e utiliza border-box como valor da propriedade box-sizing. Embora a width e a height permaneçam em 200px, o padding e o border estão incluídos nas dimensões da caixa.

É possível observar o contraste entre os tamanhos das duas caixas, sendo a primeira maior devido ao espaço adicional do padding e da border. Em contrapartida, a segunda caixa mantém um tamanho consistente de 200px, já incluindo o padding e a border.