Questão de Noções de Informática — Internet — Avança SP 2024

Box Model no CSS: padding, margin, border e outline

Gabarito: letra A. A propriedade padding é usada para adicionar espaço entre a borda de um elemento e seu conteúdo interno. No modelo de caixa (box model) do CSS, o padding é a área transparente que envolve o conteúdo, criando um respiro interno antes da borda — enquanto a margin cria espaço fora da borda, separando o elemento dos demais.

O box model é um dos conceitos mais cobrados em questões de CSS, pois define como cada elemento HTML é renderizado como uma caixa retangular composta por quatro camadas concêntricas: conteúdo (content), preenchimento (padding), borda (border) e margem (margin). A ordem, de dentro para fora, é sempre essa: o conteúdo fica no centro; o padding envolve o conteúdo; a borda contorna o padding; e a margin fica do lado de fora da borda. A pergunta pede exatamente o espaço entre a borda e o conteúdo — ou seja, a camada que fica dentro da borda, que é o padding.

Vale destacar que o padding é transparente e não pode receber valores negativos, enquanto a margin também é transparente, mas pode ser negativa (o que aproxima elementos). Além disso, o padding faz parte do tamanho total do elemento (dependendo do box-sizing), enquanto a margin não é incluída no cálculo de largura/altura quando se usa box-sizing: content-box (padrão). Essa distinção é crucial para entender o layout: aumentar o padding "empurra" a borda para fora, aumentando o espaço interno; aumentar a margin "empurra" o elemento inteiro para longe dos vizinhos.

Na prática, se você tem um <div> com texto e define padding: 20px, o texto ficará a 20 pixels de distância da borda do div, em todos os lados. Já com margin: 20px, o div inteiro ficará a 20 pixels de distância dos elementos ao redor. A confusão entre padding e margin é a pegadinha clássica dessa matéria — e é exatamente o que a banca explora aqui, oferecendo margin como alternativa B.

Guarde a fronteira: padding = espaço interno (dentro da borda); margin = espaço externo (fora da borda). É nesse critério que as alternativas se dividem.

Alternativa A — ✅ Correta ⟵ GABARITO

A propriedade padding é exatamente a que adiciona espaço entre a borda de um elemento e seu conteúdo interno. No box model, o padding é a camada que envolve o conteúdo, criando um espaçamento interno antes da borda. É transparente e pode ser definido para cada lado individualmente (padding-top, padding-right, padding-bottom, padding-left) ou de forma abreviada (padding: 10px 20px;). A definição literal do conceito: "As propriedades de preenchimento (padding) CSS são usadas para gerar espaço ao redor do conteúdo de um elemento, dentro de qualquer borda definida." — exatamente o que o enunciado pede.

Alternativa B — ❌ Incorreta

A margin cria espaço fora da borda, ao redor do elemento, separando-o dos elementos vizinhos. É a camada mais externa do box model. A banca troca o espaço interno (padding) pelo externo (margin) — a pegadinha clássica. Se a pergunta fosse "espaço entre a borda e os elementos ao redor", a resposta seria margin.

Alternativa C — ❌ Incorreta

A border é a própria borda do elemento — a linha que contorna o padding e o conteúdo. Ela não cria espaço entre a borda e o conteúdo; ela é a borda. A propriedade border define estilo, largura e cor da linha, mas não adiciona espaçamento interno.

Alternativa D — ❌ Incorreta

A outline é uma linha desenhada fora da borda, que não ocupa espaço no layout (não afeta a posição dos elementos ao redor). Ela é usada geralmente para destacar elementos (como o foco em campos de formulário). Não cria espaço entre a borda e o conteúdo — na verdade, ela fica do lado de fora da borda, sem afetar o fluxo do documento.

Alternativa E — ❌ Incorreta

Não existe uma propriedade CSS chamada spacing. O espaçamento em CSS é controlado por padding (interno) e margin (externo). A alternativa inventa um nome genérico que não corresponde a nenhuma propriedade real da linguagem.

Gabarito: letra A