O modelo de caixa: o cartão de projeto · CSS do zero

Quatro camadas

Todo elemento é um retângulo com quatro camadas, de dentro para fora:

┌─────────────────────────────────────┐
│           margin (fora)             │
│  ┌───────────────────────────────┐  │
│  │          border               │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │       padding           │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     conteúdo      │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

conteúdo: o texto ou a imagem
padding: espaço entre o conteúdo e a borda, por dentro
border: a linha
margin: espaço por fora, entre esta caixa e as vizinhas

.cartao {
  padding: var(--espaco-4);
  border: 1px solid var(--borda);
  margin-bottom: var(--espaco-4);
}

As formas curtas

padding: 16px;                /* os quatro lados */
padding: 16px 24px;           /* vertical | horizontal */
padding: 8px 16px 24px;       /* topo | laterais | base */
padding: 8px 16px 24px 32px;  /* topo | direita | base | esquerda */

/* Ou um lado por vez */
padding-top: 8px;
padding-inline: 16px;   /* esquerda e direita */
padding-block: 8px;     /* topo e base */

Quando são quatro valores, a ordem é horário a partir do topo.

`box-sizing`: a linha que se põe em todo projeto

Por padrão, width mede só o conteúdo:

.caixa {
  width: 300px;
  padding: 20px;
  border: 2px solid;
}
/* Ocupa 344px na tela: 300 + 20 + 20 + 2 + 2 */

Isso surpreende sempre, e quebra layout. A correção vale para o projeto inteiro:

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

Agora width: 300px são 300px na tela, com o recheio e a borda dentro da conta. Escreva isso no topo de toda folha de estilo.

O colapso de margens

Dois parágrafos vizinhos:

p {
  margin-bottom: 20px;
  margin-top: 30px;
}

Entre eles não ficam 50px. Ficam 30px: a maior das duas. Margens verticais vizinhas se fundem.

Isso só acontece na vertical, e só com margens. Padding não colapsa, e as laterais também não.

O envelope, que aparece em todas as páginas

Sem ele, o texto do portfólio corre de ponta a ponta num monitor largo, e vira uma linha de duzentos caracteres que ninguém lê até o fim.

.envelope {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--espaco-4);
}

margin-inline: auto divide igualmente o espaço que sobra dos dois lados. E max-width em vez de width: com max-width, numa tela estreita a caixa encolhe em vez de vazar para fora.

O padding-inline é o que garante que o texto nunca encoste na borda da tela do celular. Sem ele, no aparelho a primeira letra de cada linha fica colada no vidro.

No HTML, ele envolve o conteúdo de cada região:

<header>
  <div class="envelope">
    <nav aria-label="Menu principal">...</nav>
  </div>
</header>

<main id="conteudo">
  <div class="envelope">...</div>
</main>

Duas larguras, e elas são diferentes

O envelope de 72rem serve para grade de cartões e para o cabeçalho. Já um parágrafo de biografia dentro dele continua largo demais:

.envelope {
  max-width: 72rem; /* o layout */
}

.prosa {
  max-width: var(--medida); /* 65ch: a leitura */
}

O cartão que se repete

O mesmo cartão serve ao projeto, à área de "Como trabalho" e ao cargo da trajetória. Uma classe, três usos:

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--espaco-4);
}

.cartao > :first-child {
  margin-top: 0; /* o título não empurra o topo do cartão */
}

.cartao > :last-child {
  margin-bottom: 0; /* nem o último parágrafo empurra a base */
}

Os dois últimos blocos parecem detalhe e são o que separa um cartão bem-feito de um torto: sem eles, o padding de baixo parece maior que o de cima em metade dos cartões, e ninguém consegue explicar por quê.

A etiqueta de tecnologia

A marquinha arredondada que lista "html", "css" embaixo de cada projeto é só modelo de caixa:

.etiqueta {
  display: inline-block;
  padding: var(--espaco-1) var(--espaco-2);
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--suave);
  font-size: 0.75rem;
}

border-radius: 999px é o jeito honesto de dizer "arredonde até virar pílula": qualquer valor maior que a metade da altura dá o mesmo resultado, e este não precisa ser recalculado quando a altura mudar.

No portfólio

A folha começa a tomar forma:

box-sizing: border-box no topo do arquivo;
a classe .envelope, aplicada dentro do <header>, do <main> e do <footer> das seis páginas;
a classe .prosa nos blocos de texto corrido de sobre.html;
a classe .cartao, com os dois ajustes de primeiro e último filho;
a classe .etiqueta nas tecnologias de cada projeto;
espaçamento entre seções com margin-bottom: var(--espaco-6), numa direção só.

Depois abra o portfólio numa janela larga e numa estreita. O conteúdo deve ficar centrado na larga e com respiro nas bordas na estreita, sem rolagem horizontal em nenhuma das duas.

Exercícios

Ponha box-sizing: border-box no topo da sua folha e veja se algo mudou de tamanho.
Escreva a classe .envelope e aplique-a nas três regiões das seis páginas.
Escreva a classe .cartao e use-a nos projetos, nas áreas de "Como trabalho" e nos cargos da trajetória. Uma classe, três lugares.
Tire o margin-top: 0 do primeiro filho do cartão e compare o respiro de cima com o de baixo. Meça nas ferramentas do navegador.
Ponha .prosa na sua biografia e conte quantos caracteres cabem numa linha.
Estreite a janela até 360px de largura. Alguma coisa encosta na borda ou cria rolagem horizontal?

Referências

Modelo de caixa - MDN - as camadas e o box-sizing
Colapso de margens - MDN - quando acontece e como evitar
CSS Box Model - W3Schools - exemplos interativos