Modelo de Caixa

O Modelo de Caixa (Box Model) é um dos conceitos fundamentais do CSS e descreve como cada elemento HTML é representado visualmente como uma caixa retangular na página. Essa caixa não se limita apenas ao conteúdo do elemento, mas é formada por quatro camadas, que juntas definem o espaço ocupado pelo elemento e sua relação com os demais.

No centro da caixa está o conteúdo (content), que pode ser texto, imagem ou outros elementos. Ao redor do conteúdo existe o preenchimento (padding), que cria um espaço interno entre o conteúdo e a borda. A próxima camada é a borda (border), que contorna a caixa e pode ter espessura, estilo e cor personalizados. Por fim, há a margem (margin), que define o espaço externo, separando a caixa de outros elementos na página.

Em termos de cálculo, a largura e a altura total de um elemento no navegador não são apenas os valores definidos em width e height. Elas incluem também os valores de padding, border e margin. Por exemplo, um elemento com width: 200px; padding: 10px; border: 5px solid; margin: 20px; terá, na prática, uma largura total de 200 + 20 (padding) + 10 (bordas) = 240px, além do espaço extra de 20px de margem ao redor.

O que torna o Box Model essencial para entender como os layouts são construídos no CSS. Ele explica porque, muitas vezes, um elemento ocupa mais espaço do que o esperado e orienta o desenvolvedor na hora de alinhar, dimensionar e espaçar os elementos corretamente em uma página. Para facilitar o controle, a propriedade box-sizing pode ser usada: o valor padrão content-box considera apenas o conteúdo em width e height, enquanto border-box inclui padding e border dentro dessas medidas, simplificando cálculos em projetos modernos.

Margin, Border, Padding, Content

O Box Model define que cada elemento HTML é composto por quatro camadas principais. No centro está o content (conteúdo), que pode ser texto, imagem ou outro elemento. Em volta dele temos o padding (preenchimento), que cria um espaço interno entre o conteúdo e a borda. Logo após vem a border (borda), que envolve o elemento e pode ser configurada em espessura, estilo e cor. Por fim, a camada mais externa é a margin (margem), responsável por gerar espaço entre a caixa do elemento e as caixas vizinhas. A soma dessas partes determina o espaço real ocupado pelo elemento na página.

Box-sizing

A propriedade box-sizing controla como o navegador calcula as dimensões de um elemento. O valor padrão, content-box, considera que width e height se aplicam apenas ao conteúdo, acrescentando padding e border por fora. Isso pode aumentar a dimensão final além do esperado. Já o valor border-box inclui o conteúdo, o padding e a border dentro das medidas definidas, tornando mais previsível o cálculo de largura e altura em layouts modernos. Essa configuração é amplamente utilizada em projetos responsivos.

Dimensões (width, height, max/min)

As propriedades width e height definem respectivamente a largura e a altura de um elemento. Além delas, existem max-width e min-width, bem como max-height e min-height, que limitam as dimensões máximas e mínimas permitidas. Essas propriedades são fundamentais para o controle de layouts adaptativos, pois evitam que elementos fiquem pequenos ou grandes demais em telas diferentes, garantindo consistência visual.

Overflow

A propriedade overflow define o que acontece quando o conteúdo de um elemento ultrapassa as dimensões estabelecidas. O valor visible (padrão) permite que o conteúdo transborde para fora da caixa. O valor hidden oculta o que ultrapassar os limites. Já scroll adiciona barras de rolagem sempre, independentemente da necessidade, enquanto auto exibe barras de rolagem apenas quando o conteúdo excede as dimensões. Essa propriedade é essencial para controlar o fluxo e a legibilidade de conteúdos em caixas limitadas.

Atividade

Nesta atividade, vamos construir passo a passo exemplos práticos para entender como o CSS organiza e controla os elementos de uma página. Dividimos o conteúdo em cinco partes numeradas de 0 a 4, cada uma com foco em um conceito importante. No (0) começamos pela base, ajustando a tipografia: margens de títulos e parágrafos, a fonte da página e o destaque para trechos de código. Em seguida, no (1) exploramos o Box Model, que é a forma como o navegador representa cada elemento em camadas — content, padding, border e margin. No (2) vamos comparar o comportamento do box-sizing, entendendo a diferença entre content-box (padrão) e border-box (muito usado em layouts modernos). Já no (3) trabalhamos com as dimensões de um elemento, usando width, height, min-width e max-width para mostrar a diferença entre caixas fixas e adaptáveis. Por fim, no (4) analisamos a propriedade overflow, que define o que acontece quando o conteúdo “transborda” da caixa, testando os valores visible, hidden, scroll e auto. Assim, ao final, teremos uma visão clara e prática de como o CSS controla o espaço, o tamanho e o comportamento dos elementos em uma página web.

(0) - Tipografia básica (não afeta os conceitos do Box Model).

body

body: margin de 16px em toda a página, criando espaçamento nas bordas; fonte do sistema (system-ui), Arial ou sans-serif, para leitura limpa.

body {
  margin: 16px;
  font-family: system-ui, Arial, sans-serif;
}    

h1, h2

h1, h2: margin de 16px em cima, 0 nas laterais, 8px embaixo, garantindo espaçamento consistente nos títulos.

h1,
h2 {
  margin: 16px 0 8px;
}

p

p: margin de 8px em cima, 0 nas laterais, 12px embaixo, separando parágrafos sem exagero.

p {
  margin: 8px 0 12px;
}    

code

code: fundo cinza muito claro (#0000000d) para destacar trechos de código, padding interno de 2px/6px, cantos arredondados com border-radius de 4px. Resultado: tipografia clara e consistente, com realce sutil em <code>.

code {
  background: #0000000d;
  padding: 2px 6px;
  border-radius: 4px;
}    

(1) - Simulação do Box Model (margin, border, passing, content)

O Box Model define margin, border, padding e content. margin: espaço externo transparente (12px). border: contorno azul de 12px. padding: espaço interno entre conteúdo e borda. background: cor de fundo do content. box-shadow: cria uma “faixa” verde ao redor, simulando uma margem colorida.

.box-model {
  margin: 12px;
  border: 12px solid #1e66ff;
  padding: 12px;
  background: #eaf3ff;
  box-shadow: 0 0 0 12px #03f68d;
}

(2) - Box-sizing (comparação direta)

.box-model

O Box Model define margin, border, padding e content. margin: espaço externo transparente (12px). border: contorno azul de 12px. padding: espaço interno entre conteúdo e borda. background: cor de fundo do content. box-shadow: cria uma “faixa” verde ao redor, simulando uma margem colorida.

.box-model {
  margin: 12px;
  border: 12px solid #1e66ff;
  padding: 12px;
  background: #eaf3ff;
  box-shadow: 0 0 0 12px #03f68d;
}

.wrap-180

Cria uma caixa de referência com largura fixa de 180px. Possui borda tracejada cinza de 1px (apenas para visualização do limite) e padding interno de 4px. É usada como contêiner para comparar content-box e border-box.

.wrap-180 {
  width: 180px;
  border: 1px dashed #999;
  padding: 4px;
}

.content-box

Valor padrão do box-sizing. A largura (180px) se aplica apenas ao conteúdo, não inclui padding nem border. Com border sólida vinho (#c25) de 4px e padding de 20px, a largura final fica maior que 180px.

.content-box {
  box-sizing: content-box;
  width: 180px;
  border: 4px solid #c25;
  padding: 20px;
  background: #ffe8ee;
  margin: 8px 0;
}

.border-box

Altera o cálculo do box model: o width de 180px já inclui conteúdo, padding e border. Assim, a largura total da caixa nunca passa de 180px.

.border-box {
  box-sizing: border-box;
  width: 180px;
  border: 4px solid #c25;
  padding: 20px;
  background: #ffe8ee;
  margin: 8px 0;
}

.hint

Estilo para notas explicativas: fonte reduzida para 12px e cor cinza escuro (#444). Fica discreto para não competir com o conteúdo principal.

.hint {
  font-size: 12px;
  color: #444;
}

(3) Dimensões (with / height / min /max)

.fixed

Largura fixa de 220px e altura fixa de 80px. Possui borda amarela (#e2b100), fundo amarelo claro (#fff4cc) e padding interno de 8px. Resultado: uma caixa rígida, útil para componentes de tamanho controlado.

.fixed {
  width: 220px;
  height: 80px;
  border: 2px solid #e2b100;
  background: #fff4cc;
  padding: 8px;
}

.limited

Adapta-se ao espaço disponível: ocupa 60% da largura do contêiner, mas nunca fica menor que 260px nem maior que 420px. Possui borda verde água (#00a398), fundo azul esverdeado claro (#e3fffb) e padding interno de 8px. Resultado: caixa responsiva que respeita limites mínimo e máximo.

.limited {
  width: 60%;
  min-width: 260px;
  max-width: 420px;
  border: 2px solid #00a398;
  background: #e3fffb;
  padding: 8px;
}

(4) Overflow

.ov

Caixa de referência com largura fixa de 260px e altura de 90px. Possui borda tracejada cinza (#777), fundo cinza claro (#fafafa), padding interno de 8px e margin-bottom de 12px.

.ov {
  width: 260px;
  height: 90px;
  border: 2px dashed #777;
  background: #fafafa;
  padding: 8px;
  margin-bottom: 12px;
}

.visible

O conteúdo que ultrapassa os limites da caixa “vaza” para fora.

.visible {
  overflow: visible;

.hidden

O conteúdo excedente é cortado e não aparece.

.hidden {
  overflow: hidden;
}

.scroll

Sempre exibe barras de rolagem, mesmo que não precise.

.scroll {
  overflow: scroll;
}

.auto

Exibe barras de rolagem apenas quando necessário.

.auto {
  overflow: auto;
}

---

Exemplo completo

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Model: exemplos mínimos</title>
</head>

<body>

    <h1>Exemplos: Box Model, box-sizing, dimensões e overflow</h1>

    <!-- 1) Box Model -->
    <h2>1) Box Model (margin, border, padding, content)</h2>
    <p>Esta caixa tem <code>margin</code>, <code>border</code>, <code>padding</code> e o <code>content</code> (área
        amarela/azul).</p>
    <div class="box-model">
        Aqui é o <strong>conteúdo</strong>. O espaço entre o texto e a borda é o <em>padding</em>.
        A linha azul é a <em>border</em>. Por fora dela há a <em>margin</em>.
    </div>

    <!-- 2) box-sizing -->
    <h2>2) box-sizing</h2>
    <p class="hint">A caixa tracejada tem 180px só para referência visual.</p>
    <div class="wrap-180">
        <div class="content-box">
            <strong>content-box</strong><br />
            Largura final &gt; 180px (soma conteúdo + padding + border).
        </div>
        <div class="border-box">
            <strong>border-box</strong><br />
            Tudo cabe em 180px (conteúdo se ajusta).
        </div>
    </div>

    <!-- 3) Dimensões -->
    <h2>3) Dimensões (width, height, min/max)</h2>
    <div class="fixed">
        <strong>Fixo:</strong> width: 220px; height: 80px.
    </div>
    <div class="limited">
        <strong>Limitado:</strong> width: 60%; min-width: 260px; max-width: 420px.
    </div>

    <!-- 4) Overflow -->
    <h2>4) overflow</h2>
    <div class="ov visible">
        <strong>visible (padrão)</strong> — Conteúdo pode “vazar” para fora da caixa se passar do tamanho.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at sapien.
    </div>
    <div class="ov hidden">
        <strong>hidden</strong> — O excesso é cortado e não aparece.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at sapien.
    </div>
    <div class="ov scroll">
        <strong>scroll</strong> — Barras sempre aparecem, mesmo sem necessidade.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at sapien.
    </div>
    <div class="ov auto">
        <strong>auto</strong> — Barras aparecem só quando necessário.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at sapien.
    </div>

</body>

</html>