Modelo de caixa

No navegador, quase tudo vira retângulo. Este volume trata do retângulo: fundo, display, largura, borda, padding e margem. A Oficina da Lia deixa de ser só tipografia e ganha espaço interno e externo.

O que você vai aprender

• Ver conteúdo, padding, borda e margem como camadas.
• Pintar fundo com cor ou imagem local.
• Usar display: block, inline e flex.
• Limitar largura e tratar overflow.
• Aplicar o atalho das quatro laterais (cima, direita, baixo, esquerda).

A caixa tem quatro camadas

De dentro para fora: conteúdo, padding, borda, margem. Com box-sizing: border-box, o width já inclui padding e borda. A margem continua de fora.

Um p de bloco estica na horizontal até o ancestral. Na vertical, cresce com o texto. Por isso a página “se ajeita” quando você estreita a janela — até alguém fixar larguras demais.

Pare e experimente. Copie .card { padding: 1rem; border: 2px solid; } no fim da folha. Mude só padding para 2rem, preveja a distância até a borda, recarregue e confira. Retire o teste.

Fundo

body {
  background-color: #f4f1ea;
}

.hero {
  background-image: url("imagens/pattern.png");
  background-repeat: repeat;
  background-size: 200px;
}

Cor de fundo não herda do mesmo jeito que color do texto: o fundo padrão é transparente, e o que se vê é o fundo do pai. Imagem de fundo não substitui img com alt quando a figura informa.

Pare e experimente. Copie a regra background-image da página. Mude só o caminho para uma imagem inexistente. Preveja a cor de reserva, recarregue e confira. Restaure o arquivo correto.

display

block empilha e aceita width/height. inline corre na linha e ignora width na prática antiga. inline-block mistura. none tira do desenho e da árvore acessível visível. flex organiza filhos em eixo — a Oficina da Lia usa flex no cabeçalho a partir do capítulo 11; aqui você já pode experimentar display: flex num grupo de botões.

Pare e experimente. Copie .card { display: none; } no fim da folha de teste. Preveja o que desaparece, recarregue e percorra com Tab. Confira e retire a regra imediatamente para devolver o conteúdo.

Largura, altura e overflow

.conteudo {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.aviso {
  max-height: 8rem;
  overflow: auto;
}

width: 1000px estoura tela estreita. Prefira max-width. overflow: hidden corta conteúdo; auto cria rolagem se precisar.

Pare e experimente. Copie main { max-width: 40rem; } no fim da folha. Mude só 40rem para 30rem, preveja a coluna, recarregue e confira em janela larga e estreita. Retire o teste.

Borda, padding e margem

Borda: espessura, estilo, cor. border-radius arredonda.

Padding é ar interno: afasta o texto da borda. Margem é ar externo: afasta caixas vizinhas. Margens verticais de blocos podem colapsar (duas margens positivas podem resultar na maior, em vez da soma); se o espaço “sumir”, desconfie disso.

Atalho de quatro lados, sentido relógio: cima, direita, baixo, esquerda.

.card {
  border: 1px solid #d9d3c7;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}

Um valor: os quatro lados. Dois valores: vertical e horizontal. Três: cima, horizontal, baixo. Quatro: cada lado.

margin-left: auto com margin-right: auto e uma largura definida centra o bloco.

O exemplo 09-modelo-caixa envolve seções em cartões. Mude só o padding do .card e veja o texto respirar sem mover a margem da página.

Pare e experimente. Copie .card { padding: 1rem; } no final da folha. Mude só 1rem para 2rem, preveja o espaço interno, recarregue e confira a borda. Restaure.

Atividades

1. Ordene de dentro para fora: borda, conteúdo, margem, padding.
2. Por que width: 1200px é arriscado?
3. Qual a ordem do atalho margin: 8px 16px 24px 4px?
4. Padding e margem: qual pinta com background-color?

Respostas comentadas

1. Conteúdo, padding, borda, margem.
2. A viewport do celular é bem menor; a página sai para o lado.
3. Cima 8, direita 16, baixo 24, esquerda 4.
4. O fundo pinta conteúdo e padding. A margem é transparente em relação à própria caixa.

O arquivo completo

Referência do exemplo 09-modelo-caixa, reproduzida aqui para que você possa conferir sem sair da página.

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}