Caixas bordas e espaços

Neste capítulo você vai distinguir padding, border e margin ao organizar um bloco.

Seu ponto de partida

Estude depois do capítulo 06. O exemplo deste capítulo é 07-modelo-caixa, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

O espaço de dentro é padding

Todo elemento ocupa uma caixa. Seu conteúdo pode ter espaço interno, borda e margem externa. Padding afasta o conteúdo da borda. Margin separa a caixa de outras caixas.

A referência usa um painel branco para o conteúdo. Mudar seu espaço interno é uma experiência visível. Não use linhas vazias no HTML para criar distância.

Faça no seu exemplo

Em main.css, localize main.

main { padding: 1.5rem; background: white; }

Mude uma coisa e preveja

Troque somente padding por 2.5rem.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O texto fica mais distante das bordas do painel.

Se não acontecer

Se o painel se afastar do cabeçalho, você pode ter alterado margin em vez de padding.

Border desenha o limite

Border reúne espessura, estilo e cor. Uma borda pode ajudar a reconhecer um cartão sem usar uma imagem de decoração. Box-sizing: border-box inclui padding e borda no tamanho declarado.

Sem esse modelo, uma caixa com largura declarada pode crescer ao receber espaço interno e borda. A base aplica border-box a todos os elementos para tornar o cálculo previsível.

Faça no seu exemplo

Confira a regra geral e o cartão.

* { box-sizing: border-box; }
.cartao { border: 1px solid #a6b8c3; padding: 1rem; }

Mude uma coisa e preveja

Troque somente a borda do cartão para 3px.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O contorno fica mais espesso sem ultrapassar a largura disponível.

Se não acontecer

Não confunda outline de foco com border. Outline é usado para indicar interação e não ocupa a mesma parte do modelo de caixa.

Limite a largura sem fixar a tela

Max-width limita uma caixa em telas largas sem obrigar uma largura maior que a tela. Margin-inline: auto distribui margens laterais disponíveis e centraliza a caixa. Uma largura fixa grande pode criar rolagem horizontal no celular.

A referência combina limite e espaço lateral do body. Abra uma tela estreita depois da mudança para conferir o resultado.

Faça no seu exemplo

Confira o grupo de contêineres.

header, main, footer { max-width: 64rem; margin-inline: auto; }

Mude uma coisa e preveja

Troque somente max-width para 48rem.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O conteúdo fica mais estreito na tela larga e continua cabendo na estreita.

Se não acontecer

Se não mudar no celular, isso é esperado: a tela já era menor que os dois limites.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Aumente padding sem mudar margin.

2. Explique border-box.

3. Compare max-width e width fixa grande.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. O afastamento cresce dentro da caixa.

2. A largura declarada já inclui borda e padding.

3. Max-width permite encolher; uma largura fixa grande pode ultrapassar a tela.

Quando seguir

Você identifica onde nasce cada espaço. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 07-modelo-caixa, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }
body { background: #eef4f7; color: #203246; }
h1 { color: #174d69; }
a { color: #174d69; text-underline-offset: .2em; }
.aviso { color: #703c16; font-weight: 700; }
body { font-family: Arial, sans-serif; font-size: 1.05rem; line-height: 1.6; }
h1 { font-size: 2.2rem; line-height: 1.2; }
h2 { line-height: 1.3; }
* { box-sizing: border-box; }
body { margin: 0; padding-inline: 1rem; }
header, main, footer { max-width: 64rem; margin-inline: auto; }
header, footer { padding: 1.5rem 0; }
main { padding: 1.5rem; background: white; border-radius: .6rem; }
section { margin-block: 1.5rem; }
.cartao { border: 1px solid #a6b8c3; padding: 1rem; border-radius: .4rem; }