¿Cuál es la diferencia entre "& nbsp;" y ""?

Ambos significan espacio, pero ¿hay alguna diferencia?

Uno es un espacio sin interrupciones y el otro es un espacio regular. Un espacio sin saltos significa que la línea no debe ajustarse en ese punto, al igual que no se envolvería en medio de una palabra.

Además, como señala Svend en su comentario, los espacios que no se rompen no se colapsan.

La entidad  produce un espacio sin interrupción, que se utiliza cuando no desea un salto de línea automático en esa posición. El espacio regular tiene el código de caracteres 32, mientras que el espacio sin interrupciones tiene el código de caracteres 160.

Por ejemplo, cuando visualiza números con espacio como separador de miles: 1 234 567, entonces usa espacios sin división para que el número no se pueda dividir en líneas separadas. Si muestra la moneda y hay un espacio entre la cantidad y la moneda: 42 SEK, entonces usa un espacio sin interrupción para no obtener la cantidad en una línea y la moneda en la siguiente.

Además de las otras respuestas aquí, los espacios que no se rompen no se "colapsarán" como lo harán los espacios normales. Por ejemplo, ambos

<p>Word1          Word2</p>

y

<p>Word1 Word2</p>

hará lo mismo en cualquier navegador, mientras

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

mantendrá los espacios cuando se represente.

No es una respuesta tanto como ejemplos ...

Ejemplo 1:

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

Ejemplo # 2:

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

Y enlace al violín .

Puedes ver un ejemplo de trabajo aquí:

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

y

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

Mismo div, mismo texto, diferentes "espacios"

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

vs

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

Múltiples caracteres de espacio en blanco normales (espacio, tabulador y salto de línea) se tratan como un solo carácter de espacio en blanco :

Para todos los elementos HTML excepto PRE, las secuencias de espacios en blanco separan las "palabras" (aquí usamos el término "palabra" para significar "secuencias de caracteres que no son espacios en blanco"). Al formatear el texto, los agentes de usuario deben identificar estas palabras y diseñarlas de acuerdo con las convenciones del lenguaje escrito particular (script) y el medio de destino.

Entonces

foo    bar

se muestra como

foo bar

Pero el espacio sin interrupción siempre se muestra. Entonces

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

se muestra como

foo   bar

Como ya se mencionó, no recibirá un salto de línea donde haya un "espacio sin interrupción".

También tenga cuidado, que los elementos que contienen solo un "" pueden aparecer incorrectamente, donde & nbsp; trabajará. Por ejemplo, en 6 al menos (hasta donde recuerdo, IE7 tiene el mismo problema), si tiene un elemento de tabla vacío, no aplicará estilo, por ejemplo bordes, al elemento, si no hay contenido, o solo blanco espacio. Por lo tanto, lo siguiente no se representará con bordes:

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

Mientras que las fronteras se mostrarán en este ejemplo:

<td>& nbsp;</td>

Hmm, tuve que poner un espacio ficticio para que se renderice correctamente aquí

El primero no es tratado como espacio en blanco por el analizador HTML, el segundo sí. Como resultado, no se garantiza que el "" aparezca dentro de cierto marcado HTML, mientras que el espacio no rompible siempre aparecerá.

  debe manejarse como un espacio en blanco.

   debe manejarse como dos espacios en blanco

'' se puede manejar como un espacio en blanco no interesante

'' + '' se puede manejar como un solo ''

  es apilable, lo que significa que puede crear múltiples espacios todos juntos.

HTML solo analizará un espacio '' y descarta el resto ...

Si quieres cinco espacios, colocarías 5 x  

@Zoidberg tiene razón, ejemplo:

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

no mostrará espacio entre el marcado del encabezado, con

& nbsp ; 

hará espacio :)

Al tener saltos de línea, la línea no se romperá cuando use $ bnsp; porque es un "espacio sin interrupciones". Esto puede ser importante si tiene ciertos nombres de productos o similares, que siempre deben escribirse juntos.

Puede ser interesante si (tiene que) usar un espacio en blanco como delimitador en números, como 12344567, que se muestra 12 344 567 en Francia. Sin la línea se rompería en el medio del número, muy feo. Prueba: 12 344 567

TLDR; Además de la respuesta aceptada; Uno es implícito y el otro es explícito.

Cuando su navegador lea el HTML que ha escrito o generado por una aplicación / biblioteca / marco, lo mejor será interpretar lo que significaba su HTML (que puede variar de un navegador a otro). Cuando usa los códigos de entidad HTML, está siendo más específico para el navegador. Le está diciendo explícitamente que desea mostrar un carácter al usuario (y no que solo está espaciando su HTML para facilitar la legibilidad del desarrollador, por ejemplo).

Para ser más concreto, si el HTML de salida fuera:

<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>

El navegador solo representaría un espacio entre todas estas palabras (incluso las que se han sangrado para una mejor legibilidad del desarrollador.

Sin embargo, si pones lo mismo y solo cambiaste la <p>etiqueta a:

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

Luego representaría los espacios, como lo ha indicado más explícitamente. Existe cierta historia del uso de estos espacios para el estilo. Este uso ha disminuido un poco a medida que CSS ha madurado. Sin embargo, todavía hay usos válidos para muchas de las entidades de caracteres HTML: evitar la interpretación inesperada / involuntaria (por ejemplo, si desea mostrar el código). El w3 tiene una gran página para mostrar los otros códigos de caracteres .