HTML / Inserir vários espaços com NBSP e white-space

Para exibir múltiplos espaços no HTML, use   para uma sequência curta ou o CSS white-space: pre-wrap para preservar espaços e quebras de linha no texto. Escolha com cuidado:   também impede a quebra normal nesse ponto. Para espaçamento entre botões ou itens de navegação, use o CSS gap ou margin.

Por que vários espaços parecem um só

Com a configuração usual white-space: normal, espaços e tabulações consecutivos entre palavras colapsam para exibição. A indentação e as quebras de linha no código-fonte HTML não definem diretamente o espaçamento visual. Uma quebra de linha no código-fonte nem sempre se transforma em um espaço visível: seu tratamento pode depender da linguagem e do contexto.

Cole este exemplo completo em um editor de texto, salve-o como spaces.html usando UTF-8 e abra o arquivo em um navegador. Não é necessário instalar bibliotecas nem usar um servidor. Após a edição, salve e atualize o navegador. As palavras de exemplo usam letras latinas para que as diferenças sejam fáceis de comparar.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar espaços em HTML</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>Comparar espaços em HTML</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

No parágrafo normal, o código-fonte contém três espaços e depois sete espaços entre Alpha, Beta e Gamma, mas cada sequência normalmente aparece como um espaço. Selecione o parágrafo nas ferramentas de desenvolvedor e inspecione seu valor white-space computado. Isso distingue os caracteres no código-fonte do colapso de espaços em branco durante a renderização.

Inserir espaços inquebráveis

  é uma referência de caractere HTML para um espaço sem quebra, U+00A0. Escrevê-lo três vezes insere três caracteres que não colapsam como espaços comuns consecutivos. Também pode manter um número e sua unidade juntos.

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

O primeiro parágrafo coloca três espaços sem quebra entre Alpha e Beta. No segundo parágrafo, 10 kg impede uma quebra de linha comum entre o número e a unidade. A largura real depende da fonte e do tamanho da fonte; três espaços não têm uma largura fixa em pixels.

Conectar uma frase inteira com muitos espaços sem quebra reduz as oportunidades de quebra de linha e pode causar transbordamento em uma tela estreita. O texto copiado também contém um caractere diferente de um espaço comum, U+0020, o que pode afetar buscas e comparações de strings. Evite repetir esses caracteres para alinhar conteúdo ou criar indentação.

Preservar espaços e quebras de linha com white-space

Quando espaços repetidos e quebras de linha explícitas são partes significativas do texto, aplique white-space: pre-wrap a esse elemento. Ele preserva ambos ao mesmo tempo em que permite quebras adicionais para se ajustar à largura disponível. Isso não garante que uma URL longa ou palavra sem quebras caiba dentro da caixa.

No exemplo completo, tanto pre-wrap quanto pre retêm os três espaços entre Alpha e Beta e a quebra de linha antes de Gamma. Reduza a largura da janela: pre-wrap permite quebras adicionais, enquanto pre não. O exemplo utiliza overflow-x: auto para permitir que o segundo role horizontalmente. Com pre-line, quebras de linha explícitas permanecem, mas espaços consecutivos entre palavras se condensam.

Esta tabela resume as diferenças comuns no processamento de texto. Isso não implica que detalhes como largura de tabulação ou espaços no final da linha se comportem de forma idêntica. Verifique também os valores herdados e outras regras de CSS. Definição de white-space pelo W3C

Usar CSS para espaçar elementos

Para separar dois botões, transforme o elemento pai em um contêiner flex e defina gap em vez de adicionar espaços de texto. Use margin para espaçamento fora de um elemento e padding entre sua borda e o conteúdo. Caracteres de espaço pertencem ao conteúdo; o espaçamento via CSS controla o layout.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

No exemplo completo, os botões A e B são separados por gap: 1rem. Um rem é baseado no tamanho da fonte do elemento raiz, então nem sempre é 16 pixels. Se a largura for insuficiente, flex-wrap: wrap permite que um botão vá para a linha seguinte. Mantendo todo o resto inalterado, defina apenas gap para 0, compare o resultado e restaure 1rem.

O que verificar quando o resultado é diferente

1. Se o texto literal   aparecer, verifique se você está editando HTML. Colá-lo como texto em um editor visual, ou escapar duas vezes como  , impede que ele se torne um espaço.
2. Se os espaços ou quebras de linha desaparecerem, inspecione o valor calculado de white-space do parágrafo e confirme se o seletor CSS corresponde. A indentação do código-fonte dentro de um elemento pre-wrap também pode se tornar visível, então remova espaços em branco indesejados.
3. Se o conteúdo transbordar no celular, estreite a janela e procure por espaços sem quebra repetidos ou uma configuração pre. Dependendo do propósito, substitua-os por espaços comuns ou use pre-wrap. Verifique novamente em uma largura maior após fazer a alteração.

Para mostrar a grafia   em uma explicação ao invés de inserir um espaço, escreva   no código-fonte HTML. O padrão lista as referências de caracteres e seus caracteres correspondentes. Lista de referências de caracteres HTML do WHATWG