Desafio: Aplicar Box Sizing aos Elementos
Tarefa
Vamos explorar 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à propriedadebox-sizingpara o elemento com o idcontent-box. - Aplique o valor
border-boxà propriedadebox-sizingpara o elemento com o idborder-box.
index.html
index.css
box-sizing: content-box: Largura e altura excluem o padding e a borda.box-sizing: border-box: Largura e altura incluem o padding e a borda.
index.html
index.css
Explicação
- A primeira caixa utiliza
content-box(padrão). A largura e a altura se aplicam apenas ao conteúdo, portanto, o preenchimento e a borda aumentam o tamanho final além de 200×200px; - A segunda caixa utiliza
border-box. A largura e a altura incluem conteúdo, preenchimento e borda, então o tamanho total permanece exatamente 200×200px.
Isso faz com que a primeira caixa fique visivelmente maior, enquanto a segunda permanece consistente independentemente do preenchimento ou borda adicionados.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
What CSS code should I use to apply these box-sizing values?
Can you explain why the sizes appear different visually?
Can you show an example of how padding and border affect each box?
Incrível!
Completion taxa melhorada para 2.56Desafio: Aplicar Box Sizing aos Elementos
Deslize para mostrar o menu
Tarefa
Vamos explorar 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à propriedadebox-sizingpara o elemento com o idcontent-box. - Aplique o valor
border-boxà propriedadebox-sizingpara o elemento com o idborder-box.
index.html
index.css
box-sizing: content-box: Largura e altura excluem o padding e a borda.box-sizing: border-box: Largura e altura incluem o padding e a borda.
index.html
index.css
Explicação
- A primeira caixa utiliza
content-box(padrão). A largura e a altura se aplicam apenas ao conteúdo, portanto, o preenchimento e a borda aumentam o tamanho final além de 200×200px; - A segunda caixa utiliza
border-box. A largura e a altura incluem conteúdo, preenchimento e borda, então o tamanho total permanece exatamente 200×200px.
Isso faz com que a primeira caixa fique visivelmente maior, enquanto a segunda permanece consistente independentemente do preenchimento ou borda adicionados.
Obrigado pelo seu feedback!
