Adicionando espaços no HTML
Digite cinco espaços entre duas palavras no HTML e o navegador mostra um. Qualquer sequência de espaços, tabs e quebras de linha se reduz a um único espaço. Para adicionar espaços extras, use a entidade de espaço não separável , uma vez para cada espaço:
serve para alguns espaços numa linha de texto. Para espaços maiores, ou espaço entre elementos, use CSS, mostrado mais abaixo.
O que faz
é o espaço não separável (caractere U+00A0). Ele tem dois efeitos:
- Ele nunca é juntado, então três deles geram três espaços.
- A linha nunca quebra nele, então as palavras dos dois lados ficam juntas.
O segundo é a função de verdade. Números e suas unidades, iniciais e expressões curtas que ficam estranhas divididas em duas linhas são unidas com :
Na caixa cinza, "10" e "km" caem em linhas diferentes. Na verde, eles não podem ser separados. Para manter um trecho maior junto, white-space: nowrap num span é mais fácil que encadear entidades; veja a página de quebra de linha.
Entidades de espaço com larguras diferentes
O HTML tem caracteres nomeados para espaços mais largos e mais estreitos. Eles também não são juntados, então servem para ajustes finos de espaçamento no texto:
| Entidade | Nome | Largura |
|---|---|---|
| Espaço não separável | Igual a um espaço normal |
  | Espaço en | Meio em |
  | Espaço em | Um em (o tamanho da fonte) |
  | Espaço fino | Uma fração de em, depende da fonte |
  | Espaço estreito não separável | Fino, e sem quebra de linha |
O destaque azul mostra a largura de cada espaço. Só e   também impedem a quebra de linha.
Mantendo todos os espaços: pre e white-space
Quando o espaçamento faz parte do conteúdo (código, arte ASCII, colunas alinhadas, poesia), mantenha todos os espaços em branco em vez de adicionar entidades. O elemento <pre> faz isso por padrão, e a propriedade CSS white-space faz isso em qualquer elemento:
Valor de white-space | Espaços | Quebras de linha | Quebra linhas longas |
|---|---|---|---|
normal (padrão) | Juntados | Viram espaços | Sim |
nowrap | Juntados | Viram espaços | Não |
pre | Mantidos | Mantidas | Não |
pre-wrap | Mantidos | Mantidas | Sim |
pre-line | Juntados | Mantidas | Sim |
pre-wrap costuma ser o que você quer para texto de usuário: mantém o espaçamento e ainda quebra as linhas em telas estreitas. pre mantém as linhas como estão e rola ou transborda.
Os tabs também são mantidos dentro de pre. A largura deles é de 8 espaços por padrão, e a propriedade tab-size a altera (tab-size: 4).
Espaçamento com CSS
A maioria dos momentos de "preciso de um espaço aqui" é na verdade layout, e o CSS resolve melhor que entidades, porque o espaço fica consistente e muda num só lugar:
margin e padding espaçam elementos, gap espaça itens num contêiner flex ou grid, letter-spacing e word-spacing espaçam o próprio texto. Para indentar a primeira linha de um parágrafo, use text-indent, explicado na página de centralizar texto.
O espaço entre elementos inline
O outro lado dessa junção: o espaço em branco entre dois elementos inline ou inline-block ainda conta como um espaço. Uma quebra de linha entre dois botões no seu código coloca um pequeno espaço entre eles:
O primeiro par tem um espaço vindo da quebra de linha no código. Num contêiner flex o espaço em branco entre os itens é ignorado, então o segundo par fica encostado. Use flex e gap quando quiser controlar o espaço com exatidão.
Erros comuns
- Sequências de
para layout. Elas quebram assim que a fonte ou o tamanho da tela muda. Usemargin,paddingougap. - Digitar espaços extras e esperar que apareçam. Eles são juntados. Use
ouwhite-space: pre-wrap. - Escrever
 sem o ponto e vírgula. Os navegadores geralmente aceitam, mas é inválido e falha em algumas posições. Termine sempre com;. - Usar
em todo lugar para impedir a quebra. Uma sequência longa de texto não separável transborda em celulares. Junte só o que precisa ficar junto. - Indentar parágrafos com espaços. Use
text-indentno CSS.
Perguntas frequentes
Como dar espaço no HTML?
Um espaço simples funciona como você digita, mas espaços extras viram um só. Para mais, use a entidade de espaço não separável , uma por espaço: a b. Para espaços de layout, use margin, padding ou gap no CSS.
O que significa no HTML?
é um espaço não separável. Ele parece um espaço normal, mas o navegador nunca quebra a linha nele e nunca o junta com outros, então ele mantém palavras como 10 km juntas e permite adicionar espaços extras.
Por que o HTML ignora meus espaços?
O HTML junta os espaços em branco: qualquer sequência de espaços, tabs e quebras de linha é exibida como um único espaço, e os espaços no início e no fim de uma linha são removidos. Use , <pre> ou a propriedade CSS white-space para mantê-los.
Como coloco um tab no HTML?
O HTML não tem tab visível fora de texto pré-formatado. Dentro de <pre> ou de um elemento com white-space: pre, o caractere de tab é mantido e a propriedade CSS tab-size define a sua largura. Para indentar um parágrafo, use text-indent ou padding-inline-start no CSS.
Qual a diferença entre e  ?
tem a largura de um espaço normal.   tem meio em de largura e   tem um em (a largura do tamanho da fonte).   e   não são juntados, mas, ao contrário de , a linha ainda pode quebrar neles.
