Qual é a diferença entre "& nbsp;" e ""?

Ambos significam espaço, mas há alguma diferença?

Um é o espaço sem quebra e o outro é um espaço regular. Um espaço sem quebra significa que a linha não deve ser quebrada nesse ponto, assim como não seria quebrada no meio de uma palavra.

Além disso, como Svend ressalta em seu comentário, os espaços não quebráveis ​​não são destruídos.

A entidade  produz um espaço sem quebra, que é usado quando você não deseja uma quebra de linha automática nessa posição. O espaço regular possui o código de caractere 32, enquanto o espaço sem quebra possui o código de caractere 160.

Por exemplo, quando você exibe números com espaço como separador de milhares: 1 234 567, usa espaços sem quebra para que o número não possa ser dividido em linhas separadas. Se você exibir a moeda e houver um espaço entre o valor e a moeda: 42 SEK, use um espaço sem quebra para não obter o valor em uma linha e a moeda na seguinte.

Além das outras respostas aqui, os espaços sem quebra não serão "recolhidos", como os espaços regulares. Por exemplo, ambos

<p>Word1          Word2</p>

e

<p>Word1 Word2</p>

renderizará o mesmo em qualquer navegador, enquanto

<p>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</p>

manterá os espaços quando renderizados.

Não é uma resposta tanto quanto exemplos ...

Exemplo 1:

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello&nbsp;There
</div>  

Exemplo 2:

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello There
</div>

E link para o violino .

Você pode ver um exemplo de trabalho aqui:

http://codepen.io/anon/pen/GJzBxo

e

http://codepen.io/anon/pen/LVqBQo

Mesma div, mesmo texto, diferentes "espaços"

<div style="width: 500px; background: red"> [loooong text with spaces]</div>

vs

<div style="width: 500px; background: red"> [loooong text with &nbsp;]</div>

Vários caracteres de espaço em branco normal (espaço, tabulador e quebra de linha) são tratados como um único caractere de espaço em branco :

Para todos os elementos HTML, exceto PRE, as seqüências de espaço em branco separam "palavras" (usamos o termo "palavra" aqui para significar "sequências de caracteres de espaço que não sejam espaços em branco"). Ao formatar o texto, os agentes do usuário devem identificar essas palavras e distribuí-las de acordo com as convenções da linguagem escrita específica (script) e da mídia de destino.

assim

foo    bar

é exibido como

foo bar

Mas o espaço sem interrupção é sempre exibido. assim

foo&‍nbsp;&‍nbsp;&‍nbsp;bar

é exibido como

foo   bar

Como já mencionado, você não receberá uma quebra de linha onde houver um "espaço sem interrupção".

Também tenha cuidado, que elementos contendo apenas "" podem aparecer incorretamente, onde & nbsp; vai funcionar. Em ie 6, pelo menos (tanto quanto me lembro, o IE7 tem o mesmo problema), se você tiver um elemento de tabela vazio, ele não aplicará estilo, por exemplo, bordas, ao elemento, se não houver conteúdo ou apenas branco espaço. Portanto, o seguinte não será renderizado com bordas:

<td></td>
<td> <td>

Enquanto as fronteiras aparecerão neste exemplo:

<td>& nbsp;</td>

Hmm - tinha que colocar um espaço fictício para fazê-lo renderizar corretamente aqui

O primeiro não é tratado como espaço em branco pelo analisador de HTML, o segundo é. Como resultado, não é garantido que "" seja exibido dentro de determinadas marcações HTML, enquanto o espaço não quebrável sempre será exibido.

  deve ser tratado como um espaço em branco.

   deve ser tratado como dois espaços em branco

'' pode ser tratado como um espaço em branco não interessante

'' + '' pode ser tratado como um único ''

  é empilhável, o que significa que você pode criar vários espaços todos juntos.

HTML analisará apenas um espaço '' e soltará o resto ...

Se você quiser cinco espaços, coloque 5 x  

@Zoidberg está certo, exemplo:

<h1>title</h1> <h2>date</h2>

não exibirá espaço entre a marcação do cabeçalho, com

& nbsp ; 

vai fazer espaço :)

Quando houver quebras de linha, a linha não será interrompida quando você usar um $ bnsp; porque é um 'espaço sem quebra'. Isso pode ser importante se você tiver determinados nomes de produtos ou outros, que sempre devem ser escritos juntos.

Pode ser interessante se você (precisar) usar um espaço em branco como delimitador em números, como 12344567, exibido 12 344 567 na França. Sem a linha iria quebrar no meio do número, muito feio. Teste: 12 344 567

TLDR; Além da resposta aceita; Um está implícito e outro explícito.

Quando o HTML que você escreveu ou gerou por um aplicativo / biblioteca / estrutura é lido pelo seu navegador, é melhor interpretar o significado do seu HTML (que pode variar de navegador para navegador). Ao usar os códigos de entidade HTML, você está sendo mais específico ao navegador. Você está explicitamente dizendo que deseja exibir um caractere para o usuário (e não que você esteja apenas espaçando seu HTML para facilitar a legibilidade para o desenvolvedor, por exemplo).

Para ser mais concreto, se o HTML de saída fosse:

<html>
   <title>hello</title>
   <body>
       <p>
           Tell me and I will forget. Teach me and I
           may remember.  Involve me and I will learn.
       </p>
   </body>
</html>

O navegador renderizaria apenas um espaço entre todas essas palavras (mesmo as que foram recuadas para melhor legibilidade do desenvolvedor.

Se, no entanto, você colocar a mesma coisa e apenas alterar a <p>tag para:

<p>Hello&nbsp;&nbsp;&nbsp;There</p>

Em seguida, renderizaria os espaços, como você o instruiu mais explicitamente. Há um histórico de uso desses espaços para estilizar. Esse uso foi um pouco diminuído à medida que o CSS amadureceu. No entanto, ainda existem usos válidos para muitas das entidades de caracteres HTML: evitando interpretação inesperada / não intencional (por exemplo, se você deseja exibir o código). O w3 tem uma ótima página para mostrar os outros códigos de caracteres .