Qual è la differenza tra "& nbsp;" e " "?

Entrambi significano spazio, ma c'è qualche differenza?

Uno è uno spazio senza interruzioni e l'altro è uno spazio regolare. Uno spazio non interrotto significa che la linea non dovrebbe essere racchiusa in quel punto, proprio come non sarebbe racchiusa nel mezzo di una parola.

Inoltre, come sottolinea Svend nel suo commento, gli spazi non interrompibili non vengono compressi.

L'entità  produce uno spazio non interrompibile, che viene utilizzato quando non si desidera un'interruzione di linea automatica in quella posizione. Lo spazio normale ha il codice carattere 32, mentre lo spazio non-break ha il codice carattere 160.

Ad esempio, quando visualizzi numeri con spazio come separatore di migliaia: 1 234 567, utilizzi spazi non interrompibili in modo che il numero non possa essere diviso su righe separate. Se visualizzi la valuta e c'è uno spazio tra l'importo e la valuta: 42 SEK, allora usi uno spazio non-break in modo da non ottenere l'importo su una riga e la valuta sulla successiva.

Oltre alle altre risposte qui, gli spazi non interrotti non saranno "collassati" come faranno gli spazi regolari. Ad esempio, entrambi

<p>Word1          Word2</p>

e

<p>Word1 Word2</p>

renderizzerà lo stesso su qualsiasi browser, mentre

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

manterrà gli spazi quando renderizzati.

Non una risposta tanto quanto gli esempi ...

Esempio 1:

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

Esempio n. 2:

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

E link al violino .

Puoi vedere un esempio funzionante qui:

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

e

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

Stesso div, stesso testo, diversi "spazi"

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

vs

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

Più caratteri di spazi bianchi normali (spazio, tabulatore e interruzione di riga) vengono trattati come un singolo carattere di spazio bianco :

Per tutti gli elementi HTML tranne PRE, le sequenze di spazi bianchi separano le "parole" (qui usiamo il termine "parola" per indicare "sequenze di caratteri non bianchi"). Durante la formattazione del testo, gli interpreti dovrebbero identificare queste parole e disporle secondo le convenzioni della particolare lingua scritta (script) e del mezzo di destinazione.

Così

foo    bar

viene visualizzato come

foo bar

Ma lo spazio no-break viene sempre visualizzato. Così

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

viene visualizzato come

foo   bar

Come già accennato, non riceverai un'interruzione di riga in cui è presente uno "spazio di non interruzione".

Inoltre, fai attenzione: gli elementi che contengono solo un "" potrebbero apparire in modo errato, dove & nbsp; funzionerà. Almeno in 6 (per quanto ricordo, IE7 ha lo stesso problema), se hai un elemento tabella vuoto, non applicherà lo stile, ad esempio i bordi, all'elemento, se non c'è contenuto, o solo bianco spazio. Quindi non verrà eseguito il rendering con i bordi:

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

Considerando che i confini appariranno in questo esempio:

<td>& nbsp;</td>

Hmm -ha messo in uno spazio fittizio per farlo renderizzare correttamente qui

Il primo non è trattato come spazio bianco dal parser HTML, il secondo è. Di conseguenza, "" non è garantito per essere visualizzato all'interno di un certo markup HTML, mentre lo spazio non separabile verrà sempre visualizzato.

  dovrebbe essere gestito come uno spazio bianco.

   dovrebbe essere gestito come due spazi bianchi

'' può essere gestito come uno spazio bianco non interessante

'' + '' può essere gestito come un singolo ''

  è impilabile, il che significa che puoi creare più spazi tutti insieme.

HTML analizzerà solo uno spazio '' e diminuirà il resto ...

Se vuoi cinque spazi, posizioneresti 5 x  

@Zoidberg ha ragione, esempio:

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

non visualizzerà lo spazio tra il markup dell'intestazione, con

& nbsp ; 

farà spazio :)

In caso di interruzioni di riga, la riga non si interromperà quando si utilizza $ bnsp; perché è uno "spazio senza interruzioni". Questo può essere importante se hai determinati nomi di prodotti o simili, che devono sempre essere scritti insieme.

Può essere interessante se (devi) utilizzare uno spazio bianco come delimitatore in numeri, come 12344567, che viene visualizzato 12 344 567 in Francia. Senza la linea si spezzerebbe nel mezzo del numero, molto brutto. Test: 12 344 567

TLDR; Oltre alla risposta accettata; Uno è implicito e l'altro è esplicito.

Quando l'HTML che hai scritto o generato da un'applicazione / libreria / framework viene letto dal tuo browser, sarà meglio interpretare il significato del tuo HTML (che può variare da browser a browser). Quando usi i codici entità HTML, stai diventando più specifico per il browser. Stai dicendo esplicitamente che desideri mostrare un personaggio all'utente (e non che stai semplicemente spaziando il tuo HTML per una più facile leggibilità per lo sviluppatore, ad esempio).

Per essere più concreti, se l'output HTML 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>

Il browser renderebbe solo uno spazio tra tutte queste parole (anche quelle che sono state rientrate per una migliore leggibilità degli sviluppatori.

Se, tuttavia, hai inserito la stessa cosa e hai modificato il <p>tag in:

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

Quindi renderebbe gli spazi, come hai spiegato più esplicitamente. C'è un po 'di storia nell'uso di questi spazi per lo styling. Questo uso è stato in qualche modo diminuito con la maturazione dei CSS. Tuttavia, ci sono ancora usi validi per molte entità di caratteri HTML: evitare l'interpretazione inaspettata / involontaria (ad esempio se si desidera visualizzare il codice). La w3 ha un'ottima pagina per mostrare gli altri codici carattere .