Modelo de caixa

Este capítulo trata cada elemento como um retângulo. O retângulo tem conteúdo, padding, borda e margem. O exemplo está em exemplos/06-modelo-caixa/. Abra a home e os cartões de cerâmica, xilogravura e fotografia.

Modelo de caixa é o modo como o navegador soma essas quatro regiões para achar a largura visível.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

• Distinguir display: block, inline, inline-block e none.
• Controlar padding, border, margin e width.
• Ler o atalho TRouBLe: topo, direita, baixo, esquerda.
• Comparar content-box e border-box.
• Aplicar box-sizing no html e herdar nos filhos.

Como o elemento se mostra

display muda a participação no fluxo. Não muda o significado HTML: um a com display: block continua sendo link.

• block — começa em nova linha e tenta usar a largura disponível. h1, p e section são assim.
• inline — flui com o texto. a, em e strong são assim. Largura e altura declaradas quase não pegam.
• inline-block — aceita largura e padding, mas pode sentar na mesma linha.
• none — some do fluxo como se não existisse. Os filhos somem também.

Há um vão extra entre inline-block vizinhos, vindo dos espaços no HTML. O capítulo 8 alinha a página com Flexbox. Não use display: none para “esconder” um menu que a pessoa ainda precisa achar: o teclado também não entra ali.

As quatro regiões

Todo elemento visível é uma caixa.

• conteúdo — texto ou imagem;
• padding — espaço interno, com a cor de fundo da caixa;
• borda — o traço;
• margem — espaço externo, transparente.

.cartao {
  background: #fff;
  border: 2px solid #d6cbb8;
  padding: 1.2rem;
  margin-bottom: 1rem;
}
#conteudo {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem;
}

margin: 0 auto centra um bloco que tem largura menor que o pai. A margem de cima e de baixo fica zero; as laterais dividem o espaço que sobra.

Atalho TRouBLe

Quatro valores no atalho seguem o relógio: Top, Right, Bottom, Left. Em português: topo, direita, baixo, esquerda.

.cartao {
  padding: 1.2rem 1rem 1.4rem 1rem;
  margin: 0 0 1rem 0;
}

Dois valores significam vertical e horizontal: padding: 1rem 1.5rem. Três valores são topo, laterais, baixo. Um valor só vale para os quatro lados.

border: 2px solid #d6cbb8 junta espessura, estilo e cor. Se um pedaço faltar, a borda pode sumir.

Pare e experimente. No .cartao, troque padding: 1.2rem por padding: 2.4rem 0.4rem. Recarregue. O cartão deve ficar mais alto e mais apertado nas laterais. Restaure.

content-box e border-box

Com o valor inicial content-box, width é só o conteúdo. Padding e borda somam para fora. Uma caixa width: 300px com padding: 20px e borda 2px ocupa 344 px.

Com border-box, width já inclui padding e borda. O conteúdo encolhe para caber. A conta fica previsível.

Erro comum: width: 100% mais padding grande em content-box. A caixa transborda o pai e nasce uma rolagem horizontal.

A fórmula deste volume

Declare no html e herde. Assim um filho pode, se um dia precisar, voltar a content-box sem brigar com um * solto.

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

* escolhe todos os elementos. ::before e ::after são pedaços gerados pelo CSS. inherit copia o box-sizing do pai.

O exemplo 06-modelo-caixa já aplica essa fórmula. Os cartões têm padding e border sem estourar a coluna.

Pare e experimente. Na cópia, acrescente width: 100% ao cartão e troque seu box-sizing para content-box. Preveja que o padding será somado à largura. Recarregue para conferir e restaure border-box.

Não use width e padding grandes no mesmo bloco sem border-box. Prefira max-width no #conteudo para a linha de texto não ficar interminável.

Atividades

1. Padding e margem: qual dos dois aceita a cor de fundo da caixa?
2. O que padding: 8px 16px 24px 32px aplica em cada lado?
3. Por que width: 100% com padding em content-box transborda?
4. No exemplo 06-modelo-caixa, onde box-sizing é declarado e como os filhos o recebem?

Respostas comentadas

1. O padding. A margem é espaço fora da borda e não pinta o fundo da caixa.
2. Topo 8 px, direita 16 px, baixo 24 px, esquerda 32 px. TRouBLe.
3. Os 100% já são a largura do pai. O padding soma para fora e a caixa fica maior que o pai.
4. Em html { box-sizing: border-box }. Os demais herdam com box-sizing: inherit no seletor *.

Referências

• O modelo de caixa
• box-sizing
• display