>> Tecnologia Eletrônica >  >> Casa Inteligente >> Vida Inteligente

Como Reduzir Espaçamento Entre Linhas no HTML/CSS

Controle o espaçamento entre linhas (line-height) via CSS. Método moderno: use CSS externo/interno, não estilo inline obsoleto.

Método Recomendado: CSS (Interno ou Externo)

<style>
  .compacto { line-height: 1.2; }  /* 1.2x tamanho da fonte */
  .muito-compacto { line-height: 1.0; } /* mínimo, pode cortar descendentes */
  .normal { line-height: 1.5; }  /* padrão navegador ~1.5 */
  .duplo { line-height: 2.0; }   /* espaço 1.5 / ABNT */
</style>

<p class="compacto">Texto com linhas mais juntas.</p>
<p class="normal">Texto com espaçamento padrão.</p>

Valores de line-height

  • Número sem unidade (ex: 1.5): multiplicador do font-size do elemento. Recomendado (herda corretamente).
  • Unidade (px, em, rem, %): valor fixo ou relativo. 150% = 1.5x. 1.5em = 1.5x do font-size do pai.
  • Palavras-chave: normal (~1.2-1.5 depende da fonte).

Exemplo Completo (HTML5)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Espaçamento de Linhas</title>
  <style>
    body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.6; }
    .apertado { line-height: 1.2; }
    .expandido { line-height: 2.0; }
  </style>
</head>
<body>
  <p>Parágrafo normal (line-height 1.6 herdado do body).</p>
  <p class="apertado">Parágrafo compacto (line-height 1.2). Economiza espaço vertical.</p>
  <p class="expandido">Parágrafo espaçado (line-height 2.0). Estilo ABNT/acadêmico.</p>
</body>
</html>

Erro Comum no Artigo Original

O artigo original sugere <div style=> com line-height: dentro de aspas malformadas. Não faça isso. Use classes CSS como acima.

Dicas

  • line-height: 1 pode cortar letras com "pernas" (g, j, p, q, y). Mínimo seguro: 1.1 ou 1.2.
  • Para parágrafos: use margin-bottom para espaço entre parágrafos, não <br><br>.
  • Reset CSS: * { line-height: 1.5; } padroniza no projeto.
  • Eletrodomésticos
  • Aspiradores Robô
  • Segurança Residencial
  • Aspirador de pó
  • Máquinas de lavar roupas
  • Refrigeradores
  • Ar-Condicionado
  • Vida Inteligente

    • Vida Inteligente