Texto confortável e espaço nas caixas

Neste capítulo você vai melhorar a leitura e distinguir espaço interno de espaço entre elementos.

Seu ponto de partida

Continue depois do capítulo 02. Abra pacote de exemplos/03-texto-caixas. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Abra espaço entre as linhas

Um texto pode ter palavras corretas e ainda ser cansativo de ler. O espaço entre linhas ajuda a acompanhar uma frase sem pular para a linha errada. A propriedade line-height controla esse espaço.

A regra usa .apresentacao para atingir apenas o texto de abertura. O valor 1.7 não tem unidade: ele multiplica o tamanho da fonte usado no elemento. Não significa 1.7 pixel.

Não escolha h2 apenas porque sua aparência parece bonita. h1 apresenta o assunto principal e h2 inicia uma seção. Quando o tamanho não servir, ajuste a apresentação pelo CSS e preserve o significado do HTML.

Você vai aprender medidas aos poucos. Aqui, rem acompanha o tamanho da fonte do elemento raiz, normalmente html. px é um pixel CSS e costuma servir para pequenos detalhes, como bordas. Não precisa converter cada medida em pixels físicos.

Faça no seu exemplo

Acrescente a regra no fim de custom.css. Ela se combina com a declaração de negrito anterior porque modifica outras propriedades.

.apresentacao {
  line-height: 1.7;
  font-size: 1.1rem;
}

Mude uma coisa e preveja

Troque somente line-height: 1.7 por line-height: 1.2.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Se o texto couber numa linha, estreite a janela para enxergar a comparação. Restaure 1.7 depois de conferir.

Resultado esperado neste teste: As linhas da apresentação devem ficar mais próximas, sem mudar o tamanho da fonte.

Se não acontecer

Não altere font-size junto com line-height no mesmo teste. Você perderia a referência de qual mudança causou o resultado.

Separe espaço interno e externo

A nota tem texto, espaço interno, uma borda e espaço ao redor. Essas regiões formam o modelo de caixa. Padding afasta o conteúdo da borda. Margin separa a caixa de outros elementos.

Acrescente a regra abaixo depois da regra .nota anterior. A nova declaração padding vale para os quatro lados e substitui também o padding-left definido antes. A borda lateral continua ativa porque esta regra não a redefine.

Um valor único de padding vale em todos os lados. Dois valores significam espaço vertical e horizontal. Por exemplo, padding: 1rem 2rem aumenta somente a medida horizontal em relação ao primeiro caso. Primeiro pratique um valor; use a abreviação depois que conseguir enxergar os lados.

Não precisa de fundo colorido para descobrir a caixa. A borda lateral é suficiente para observar quanto o texto se afasta dela.

Faça no seu exemplo

Acrescente em custom.css. margin-block define as margens no eixo de blocos, que na escrita horizontal deste exemplo corresponde a cima e baixo.

.nota {
  padding: 1rem;
  margin-block: 2rem;
}

Mude uma coisa e preveja

Troque somente padding: 1rem por padding: 2rem.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Observe primeiro a distância do texto à borda. Restaure padding: 1rem. Depois teste margin-block: 3rem e observe a separação externa; restaure 2rem.

Resultado esperado neste teste: O texto deve se afastar mais da borda por dentro da nota. As margens externas continuam definidas por 2rem.

Se não acontecer

Aumentar margin não afasta o texto da própria borda. Se esse era seu objetivo, a propriedade a investigar é padding.

Limite a largura sem cortar o texto

Uma nota com largura rígida pode ultrapassar a tela estreita. Vamos limitar o tamanho máximo e permitir que a caixa use menos espaço quando a tela for menor.

max-width: 100% impede que a caixa fique mais larga que a área disponível neste contexto. width: 30rem define uma largura desejada. As duas declarações trabalham juntas. Height não foi fixada: a caixa pode crescer quando o texto ocupa mais linhas.

O Simple.css usa box-sizing: border-box. Nesse modelo, width inclui conteúdo, padding e bordas. As margens continuam externas. Sem border-box, uma largura de 300px com 20px de padding em cada lado e bordas de 2px teria 344px até a borda externa.

Essa conta é uma referência para investigar. Não tente compensar cada espaço manualmente. Uma caixa que pode crescer com seu conteúdo costuma ser mais fácil de manter.

Faça no seu exemplo

Acrescente a regra em custom.css. Ela modifica somente a nota.

.nota {
  width: 30rem;
  max-width: 100%;
}

Mude uma coisa e preveja

Troque width: 30rem por width: 20rem.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Teste a janela larga e a estreita. A nota deve permanecer dentro da área de leitura. Restaure 30rem.

Resultado esperado neste teste: A nota deve ficar mais estreita numa janela larga e ganhar mais linhas quando necessário.

Se não acontecer

Não use height fixa para alinhar um texto. Ao aumentar a fonte ou acrescentar palavras, o conteúdo pode não caber.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Aumente o espaço interno da nota sem alterar sua margem.
2. Faça a apresentação ter linhas mais afastadas sem aumentar a fonte.
3. Acrescente duas frases à nota e teste com zoom de 200%.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Modifique padding. Margin controla o espaço externo.

2. Aumente line-height e deixe font-size como estava.

3. A caixa deve crescer em altura. Se cortar texto, remova a altura fixa que introduziu. Confira também max-width e se a janela ainda permite leitura.

Quando seguir

Você reconhece padding e margin visualmente e mantém a nota legível com texto maior. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1

O arquivo completo

Referência do exemplo 03-texto-caixas, 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>Caderno CSS | Curso de CSS</title>
  <link rel="stylesheet" href="simple.css">
<link rel="stylesheet" href="custom.css">
  
</head>
<body>
  <a class="pular" href="#conteudo">Pular para o conteúdo</a>
  <header>
    <h1>Caderno CSS</h1>
    <p>Pequenos passos para aprender CSS.</p>
    
  </header>
  <main id="conteudo" tabindex="-1">
    <h2>Meu ponto de partida</h2>
<p class="apresentacao">Um lugar para estudar uma coisa por vez.</p>
<p class="nota">Leia, mude uma coisa e confira o resultado.</p>

  </main>
  <footer>
    <p>Material fictício para estudo local.</p>
  </footer>
</body>
</html>

custom.css

/* Personalizações do Caderno CSS. Preserve simple.css. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pular {
  position: absolute;
  left: -10000px;
}
.pular:focus {
  position: static;
}

/* Capítulo 01 */
h1 { font-style: italic; }

/* Capítulo 02 */
.nota { border-left: 4px solid var(--accent); padding-left: 1rem; }
.apresentacao { font-weight: normal; }
.apresentacao { font-weight: bold; }

/* Capítulo 03 */
.apresentacao { line-height: 1.7; font-size: 1.1rem; }
.nota { padding: 1rem; margin-block: 2rem; width: 30rem; max-width: 100%; }