Crie ritmo com espaçamento, bordas e fundos

Espaçamento não é sobra. Ele ajuda a mostrar quais conteúdos pertencem ao mesmo grupo, quais estão separados e qual caminho o olhar deve seguir. Nesta aula, você vai aplicar margin, padding e gap com responsabilidades diferentes, além de usar bordas e fundos para criar limites visuais.

Pense numa mesa posta. Existe distância entre os pratos, espaço dentro de cada prato para a comida e uma toalha que define a área da mesa. No CSS, gap ou margin podem separar itens, padding cria espaço interno e background preenche a área da caixa. A analogia para aqui: o navegador não entende uma “mesa bonita”; ele calcula caixas, propriedades e o algoritmo de layout ativo.

Escolha o espaço pela relação

padding fica entre conteúdo e borda. margin fica fora da borda. gap cria intervalos entre filhos de um container grid, flex ou multi-coluna. Compare:

.painel {
  padding: 24px;
}

.lista {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

O painel usa padding porque seu conteúdo precisa respirar dentro do contorno. A lista usa gap porque os itens precisam de um intervalo consistente entre si. A margem separa a lista do conteúdo anterior. Se a ordem dos itens mudar, o gap continua correto sem exigir margem especial no primeiro ou no último elemento.

As propriedades lógicas margin-block, margin-inline, padding-block e padding-inline descrevem eixos de escrita. Em português horizontal, margin-block afeta o eixo vertical e margin-inline, o horizontal. Elas são úteis quando o conteúdo pode aparecer em outros modos de escrita.

Borda delimita; canto arredondado não corta sozinho

Uma borda combina largura, estilo e cor:

.aviso {
  border: 2px solid #7c3aed;
  border-radius: 12px;
  padding: 16px;
}

border-radius arredonda o contorno e o fundo, mas conteúdo que ultrapassa a caixa pode continuar visível. Para recortar conteúdo, existe overflow, que deve ser escolhido conscientemente. Uma borda também aumenta a caixa quando box-sizing é content-box; com border-box, ela entra no tamanho declarado.

Fundo precisa preservar o conteúdo

background-color oferece uma base. background-image pode adicionar gradiente ou imagem, mas não deve ser a única fonte de uma informação importante:

.cabecalho {
  color: #ffffff;
  background-color: #312e81;
  background-image: linear-gradient(135deg, #312e81, #6d28d9);
}

O gradiente é decorativo; o fundo sólido continua sendo uma alternativa. O contraste do texto deve ser verificado nos trechos mais claros e mais escuros, não apenas em uma das pontas.

Evite usar várias sombras e bordas para compensar uma hierarquia confusa. Primeiro agrupe o conteúdo e defina o espaçamento; depois acrescente um contorno somente quando ele comunica um limite útil. Esse processo reduz regras e deixa mais claro qual propriedade causou o resultado observado.

No laboratório, o modo compacto reduz o padding do painel e o gap da lista. Observe que nenhum texto muda: somente as relações espaciais são recalculadas. Depois altere article para usar border: 2px solid e confira se o contorno passa a ocupar todos os lados. Sua microprática é nomear cada mudança antes de fazê-la: “interior”, “entre irmãos” ou “fora da caixa”.

Na próxima aula, essas escolhas vão se adaptar ao espaço disponível em vez de depender de uma largura fixa de tela.