Tudo é uma caixa

Este capítulo trata cada elemento da Oficina Costeira como um retângulo. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Título, parágrafo, imagem e botão ocupam caixa, mesmo quando o desenho não parece caixa.

O exemplo está em exemplos/23-tudo-e-uma-caixa/. Toda página usa lang="pt-BR". Este volume tem 52 capítulos.

O modelo de caixa descreve conteúdo, padding, borda e margem. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Ver conteúdo, padding, borda e margem.
• Usar atalho de margin e padding no sentido horário.
• Entender o colapso de margens verticais.
• Limitar largura; evitar height no texto.
• Ligar box-sizing: border-box.
• Aplicar fundo, borda, raio e sombra.

Quatro regiões

Todo elemento visível é uma caixa. O conteúdo fica no centro. Padding é o ar interno, ainda com a cor de fundo. Borda é o traço. Margem é o ar externo, transparente.

Uma caixa sem conteúdo e sem padding pode parecer “inexistente”. O h1 da Oficina Costeira existe porque tem texto. Um div vazio só aparece se você der padding, altura ou borda.

<article class="card">
  <h2>Cartaz da Feira de Tambaú</h2>
  <p>Projeto fictício da Oficina Costeira em João Pessoa.</p>
</article>

.card {
  padding: 1.25rem;
  border: 1px solid #d9d3c7;
  margin-bottom: 1rem;
  background: #fff;
}

O fundo pinta conteúdo e padding. Para na borda. A margem não pinta.

No DevTools, a figura da caixa mostra as quatro regiões com números. Clique no h1 e leia padding e margem computados. A inspeção vale mais do que decorar.

Atalho horário

Cada lado tem propriedade longa: margin-top, padding-right, e assim por diante. O atalho aceita até quatro valores, começando em cima, no sentido horário.

.hero {
  padding: 2rem 1rem 3rem 1rem;
  /* cima direita baixo esquerda */
}
.hero {
  padding: 2rem 1rem 3rem;
  /* cima, direita/esquerda, baixo */
}
.hero {
  padding: 2rem 1rem;
  /* cima/baixo, direita/esquerda */
}
.hero {
  padding: 2rem;
  /* os quatro lados */
}

O mesmo mapa vale para margin. margin-inline: auto centra no eixo horizontal quando a caixa tem largura menor que o pai. É o truque do .wrap.

.wrap {
  width: min(70rem, calc(100% - 2rem));
  margin-inline: auto;
}

Não use margem para “criar colunas de página”. Margem afasta caixas. Grade vem no Flexbox (capítulo 26). Float, na 25, só envolve texto em imagem.

Colapso de margem vertical

Margens de cima e de baixo de irmãos em bloco podem colapsar. O navegador fica com a maior, não com a soma.

.h2-secao {
  margin-bottom: 1rem;
}
.texto {
  margin-top: 2rem;
}

A distância entre os dois não é 3rem. É 2rem. O menor some dentro do maior.

Isso não acontece do mesmo jeito com padding. Padding nunca colapsa. Também muda no Flexbox, que honra as duas margens. Anote: o comportamento depende do contexto de layout.

Pai e primeiro filho também podem colapsar a margem de cima. Padding ou borda no pai costuma impedir o colapso. Se o h1 “gruda” no main, veja se a margem do título escapou para fora.

Largura, altura e unidades

width no bloco define a largura do conteúdo no modelo antigo, ou da borda no border-box. Prefira largura relativa: %, min(), max-width.

.card {
  max-width: 22rem;
}
p {
  max-width: 65ch;
}

Evite height em caixa de texto. A pessoa aumenta a fonte e o texto vaza. Use min-height se precisar de um piso, e deixe crescer.

.hero {
  min-height: 10rem;
}

height: 100vh no hero inteiro pode valer para um cartaz de tela cheia. Ainda assim, teste o zoom. Conteúdo não pode ficar preso atrás do menu.

Unidade rápida:

• % — cresce com o pai (coluna, imagem);
• em / rem — cresce com o texto (medida, padding de botão);
• px — detalhe fino (borda 1 px), não parágrafo.

A conta do border-box

No content-box (inicial), width: 300px é só o conteúdo. Padding 20 px e borda 2 px somam para fora: a caixa ocupa 344 px. Duas colunas de 50% estouram.

No border-box, width já inclui padding e borda. 50% + 50% cabe. Este volume liga isso no topo do main.css.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Outra forma, herdada do html:

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

As duas funcionam. O exemplo usa a primeira. Não misture content-box num cartão sem motivo.

Pare e experimente. Num .card com width: 50% e padding: 2rem, desligue só o box-sizing global (comente as três linhas). Preveja: o cartão fica mais largo que 50%. Recarregue, inspecione a caixa, confira. Descomente.

Erro comum: somar width: 50% + padding: 2rem em duas colunas com content-box e acusar o Flexbox. A conta da caixa quebrou antes do layout.

Decoração da caixa

background-color pinta por baixo do texto, até a borda.

.site-header {
  background-color: #0b4f6c;
  color: #fff;
}

border pede espessura, estilo e cor. Lados isolados existem: border-bottom.

.site-footer {
  border-top: 1px solid #d9d3c7;
  padding: 1.25rem 0;
}
.botao {
  border: 1px solid #c45c26;
  border-radius: 0.25rem;
  padding: 0.7rem 1.4rem;
}

border-radius arredonda. 50% num quadrado vira círculo. box-shadow desenha sombra fora (ou inset dentro).

.card {
  box-shadow: 0 0.25rem 0.75rem rgb(20 34 43 / 0.08);
}

Sombra não aumenta a caixa do fluxo. Margem ainda é o que empurra o vizinho.

Imagem de fundo fica para a série de imagens. Agora a caixa já se comporta. A próximo capítulo decide se a caixa é bloco, linha ou híbrida.

Atividades

1. O fundo de .card pinta a margem? Por quê?
2. Em padding: 2rem 1rem 3rem, qual é o padding esquerdo?
3. Duas caixas com margin-bottom: 1rem e margin-top: 2rem: qual o vão vertical no fluxo normal?
4. Por que height: 200px num parágrafo é arriscado?
5. O que box-sizing: border-box inclui dentro de width?

Respostas comentadas

1. Não. Fundo cobre conteúdo e padding, até a borda. Margem é transparente.
2. 1rem. Com três valores, o do meio vale direita e esquerda.
3. 2rem. As margens verticais colapsam para o maior valor.
4. Texto maior (zoom) vaza da altura fixa. Prefira min-height ou só padding.
5. Conteúdo, padding e borda. A margem continua fora.

Referências

• Modelo de caixa
• box-sizing
• margin
• padding
• border

O arquivo completo

Referência do exemplo 23-tudo-e-uma-caixa, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}