Questão de Programação — HTML (HyperText Markup Language) — FGV 2024

Box Model e layout: largura total e disposição de elementos

Gabarito: letra A. A largura total ocupada pelo elemento "secao1" é de 100px e o conteúdo exibido são círculos dispostos em linha. Isso porque, no modelo de caixa (box model) do CSS, a largura total de um elemento é a soma do width com padding, border e margin; e a disposição dos círculos em linha se deve à propriedade display: inline-block (ou flex), que os coloca lado a lado.

O box model é o conceito fundamental para entender como os elementos HTML ocupam espaço na página. Todo elemento é uma caixa retangular composta por quatro áreas: o conteúdo (content), o preenchimento interno (padding), a borda (border) e a margem externa (margin). A largura total que um elemento ocupa na página não é apenas o valor da propriedade width, mas a soma de todas essas partes. Por exemplo, se um elemento tem width: 20px, padding: 20px em cada lado, border: 10px em cada lado e margin: 10px em cada lado, a largura total será: 20 (content) + 20×2 (padding) + 10×2 (border) + 10×2 (margin) = 100px. É exatamente esse cálculo que a questão explora: o elemento "secao1" tem width: 20px, mas com os paddings, bordas e margens, a largura total chega a 100px.

A disposição dos elementos filhos (os círculos) depende da propriedade display do contêiner. Se o contêiner tem display: block, os filhos são empilhados verticalmente (em coluna). Se tem display: inline-block ou display: flex (com flex-direction: row), os filhos ficam lado a lado (em linha). No caso da questão, os círculos estão dispostos em linha, o que indica que o contêiner usa display: inline-block ou flex. A forma dos elementos (círculo ou semicírculo) é definida pela propriedade border-radius: um valor de 50% (ou metade do tamanho) cria um círculo perfeito; um valor menor cria cantos arredondados, mas não um semicírculo. Para ser um semicírculo, seria necessário um border-radius de 50% apenas em dois cantos opostos, o que não é o caso aqui.

A pegadinha da banca está em dois pontos: primeiro, confundir a largura do conteúdo (width: 20px) com a largura total (100px), ignorando o box model; segundo, confundir a forma dos elementos (círculo vs. semicírculo) e a disposição (linha vs. coluna). O candidato que não domina o box model tende a marcar a alternativa B (20px), e o que não observa a disposição dos elementos pode marcar a alternativa D ou E. A chave é lembrar que a largura total é a soma de todas as partes da caixa, e que a disposição é definida pelo display do contêiner.

Guarde a distinção entre width (largura do conteúdo) e largura total (soma com padding, border e margin): é exatamente nela que as alternativas se dividem.

Alternativa A — ✅ Correta ⟵ GABARITO

A largura total é 100px, pois o elemento tem width: 20px, padding: 20px (esquerda e direita), border: 10px (esquerda e direita) e margin: 10px (esquerda e direita), totalizando 20 + 40 + 20 + 20 = 100px. Os círculos estão dispostos em linha, pois o contêiner usa display: inline-block (ou flex), que coloca os filhos lado a lado. A forma circular é definida por border-radius: 50%.

Alternativa B — ❌ Incorreta

A largura de 20px está errada, pois ignora o box model: a largura total é a soma do width com padding, border e margin. Além disso, os círculos estão em linha, não em coluna. O valor 20px corresponde apenas ao width do conteúdo, não à largura total ocupada.

Alternativa C — ❌ Incorreta

A largura de 20px está errada pelo mesmo motivo da alternativa B. Além disso, os elementos são círculos, não semicírculos. Um semicírculo exigiria border-radius de 50% apenas em dois cantos, o que não é o caso.

Alternativa D — ❌ Incorreta

A largura de 20px está errada (box model ignorado) e os elementos são círculos, não semicírculos. A disposição em coluna também está errada, pois os círculos estão em linha.

Alternativa E — ❌ Incorreta

A largura de 100px está correta, mas os elementos são círculos, não semicírculos, e estão em linha, não em coluna. A banca troca a forma e a disposição para confundir o candidato.

Gabarito: letra A