Caixas e espaçamentos · Programa com Martin

Descobre o maior segredo do CSS: tudo numa página é uma caixa. E aprende a movê-las.

Vou mostrar-te: tudo é uma caixa

Eis o maior segredo do design web: cada coisa numa página é uma caixa retangular. Um título, um parágrafo, uma imagem, um menu – tudo. Quando aprendes a ver isto, todo o CSS faz sentido.

Cada caixa tem três tipos de espaço à volta:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – a almofada: espaço entre o conteúdo e a borda (dentro da caixa)
border – a moldura da caixa
margin – espaço entre a caixa e os vizinhos (fora da caixa)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Vou mostrar-te: uma página como os profissionais constroem

Já viste isto em sites reais – o conteúdo não se estica por todo o ecrã largo, fica numa coluna confortável ao centro. Três linhas de CSS fazem isso:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto é uma fórmula mágica: zero em cima e em baixo, «automaticamente igual» nas laterais – ou seja, centrado. Quase todos os sites do mundo usam esta regra.

E vamos domar as imagens também, para nunca saírem da página:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Agora és tu 💪

Esta tarefa é igual para todos os projetos – é um fato universal para qualquer site:

Centra o teu conteúdo: a regra max-width + margin: 0 auto em main.
Domina as tuas imagens com a regra img do exemplo.
Melhora o teu distintivo da última lição: adiciona margin para ter espaço para respirar.
Deixa a página respirar: adiciona body { line-height: 1.6; } – as linhas de texto espalham-se bem.

Solução completa (funciona para todos os projetos)

Adiciona isto a style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

E ao teu distintivo (o teu pode chamar-se .news, .favorite, .tip ou .win), adiciona esta linha:

  margin: 20px 0;

💡

Tenta tornar as caixas visíveis! Adiciona esta regra ao teu CSS por um momento: * { border: 1px solid red; } – o asterisco significa «absolutamente tudo». De repente vês cada caixa na página. Depois apaga outra vez, mas lembra-te dessa vista: é assim que o browser vê a tua página.

✅

Verifica tu: O teu conteúdo está numa coluna centrada confortável, as fotos têm cantos arredondados e não saem para lado nenhum, o texto é fácil de ler. Encolhe a janela do browser – o conteúdo adapta-se. O teu site de repente parece uma classe acima.

O que ficas a saber desta lição

Tudo numa página é uma caixa com padding (dentro), border (moldura) e margin (fora).
max-width + margin: 0 auto = uma coluna de conteúdo centrada, como sites reais.
img { max-width: 100%; } – as fotos nunca saem para fora.