O Box Model CSS é essencialmente uma caixa que envolve cada elemento HTML. Ele é formado por
- A)height, width, border e padding.
Errada, porque height e width são dimensões do elemento, mas o box model é formado por content, padding, border e margin.
- B)width, border, padding e margin.
Errada, porque falta o content e width não substitui a camada central da caixa no modelo CSS.
- C)content, padding, borders e margins.
Certa, pois reúne as quatro partes clássicas do box model: content, padding, border e margin.
- D)height, border, content e margin.
Errada, porque height não é parte do box model e a ordem dos componentes também não corresponde ao modelo correto.
- E)height, width, border e content.
Errada, porque height e width são propriedades de tamanho, não componentes do box model, e falta a margin.
Gabarito: C
O Box Model do CSS é a forma como o navegador enxerga cada elemento como uma caixa, e essa caixa tem camadas bem definidas. Do centro para fora, você encontra o content, que é onde o conteúdo realmente aparece, depois o padding, que é o espaço interno, em seguida a border, que é a borda, e por fim a margin, que é o espaço externo entre uma caixa e outra. É quase uma cebola do layout, só que sem fazer você chorar na prova. A alternativa correta é a letra C porque ela traz exatamente os quatro componentes clássicos do box model: content, padding, borders e margins. Em CSS, essa é a estrutura básica usada para calcular tamanho e espaçamento dos elementos na página. Se você entender essa ordem, fica mais fácil interpretar largura, altura, distância entre elementos e o efeito de bordas e preenchimentos. Vale lembrar que width e height não são partes do box model em si, mas propriedades que definem a dimensão do conteúdo em muitos casos, dependendo do box-sizing. Já padding, border e margin são camadas do modelo. Em prova, a banca costuma cobrar essa distinção com nomes parecidos para ver se você caiu na armadilha ou passou com tranquilidade.