Was ist der Unterschied zwischen "& nbsp;" und " "?

Beide bedeuten Raum, aber gibt es einen Unterschied?

Einer ist ein nicht brechender Raum und der andere ist ein regulärer Raum. Ein nicht unterbrechendes Leerzeichen bedeutet, dass die Zeile an diesem Punkt nicht umbrochen werden sollte, so wie sie nicht in die Mitte eines Wortes eingeschlossen werden würde.

Darüber hinaus werden, wie Svend in seinem Kommentar betont, nicht brechende Leerzeichen nicht reduziert.

Die Entität  erzeugt einen nicht unterbrechenden Bereich, der verwendet wird, wenn an dieser Position kein automatischer Zeilenumbruch gewünscht wird. Das reguläre Leerzeichen hat den Zeichencode 32, während das nicht unterbrechende Leerzeichen den Zeichencode 160 hat.

Wenn Sie beispielsweise Zahlen mit Leerzeichen als Tausendertrennzeichen anzeigen: 1 234 567, verwenden Sie nicht unterbrechende Leerzeichen, damit die Zahl nicht in separate Zeilen aufgeteilt werden kann. Wenn Sie die Währung anzeigen und zwischen dem Betrag und der Währung ein Leerzeichen steht: 42 SEK, verwenden Sie ein nicht unterbrechendes Leerzeichen, damit Sie den Betrag nicht in einer Zeile und die Währung in der nächsten Zeile erhalten.

Zusätzlich zu den anderen Antworten hier werden nicht unterbrechende Leerzeichen nicht wie normale Leerzeichen "reduziert". Zum Beispiel beides

<p>Word1          Word2</p>

und

<p>Word1 Word2</p>

wird das gleiche in jedem Browser rendern, während

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

behält die Leerzeichen beim Rendern bei.

Keine Antwort so sehr wie Beispiele ...

Beispiel 1:

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

Beispiel 2:

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

Und Link zur Geige .

Ein funktionierendes Beispiel finden Sie hier:

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

und

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

Gleiches div, gleicher Text, verschiedene "Leerzeichen"

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

vs.

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

Mehrere normale Leerzeichen (Leerzeichen, Tabulator und Zeilenumbruch) werden als ein einziges Leerzeichen behandelt :

Für alle HTML-Elemente außer PRE, Leerzeichenfolgen trennen "Wörter" (wir verwenden hier den Begriff "Wort", um "Folgen von Nicht-Leerzeichen" zu bedeuten). Bei der Formatierung von Text sollten Benutzerprogramme diese Wörter identifizieren und sie gemäß den Konventionen der jeweiligen Schriftsprache (Skript) und des Zielmediums anordnen.

So

foo    bar

wird angezeigt als

foo bar

Es wird jedoch immer ein Unterbrechungsbereich angezeigt. So

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

wird angezeigt als

foo   bar

Wie bereits erwähnt, erhalten Sie keinen Zeilenumbruch, wenn ein "Leerzeichen ohne Unterbrechung" vorhanden ist.

Seien Sie auch vorsichtig, dass Elemente, die nur ein "" enthalten, möglicherweise falsch angezeigt werden, wobei & nbsp; wird funktionieren. Zumindest in 6 (soweit ich mich erinnere, hat IE7 das gleiche Problem), wenn Sie ein leeres Tabellenelement haben, wird das Element nicht mit Stilen, z. B. Rahmen, versehen, wenn kein Inhalt vorhanden ist oder nur Weiß Platz. Folgendes wird also nicht mit Rahmen gerendert:

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

Während die Grenzen in diesem Beispiel angezeigt werden:

<td>& nbsp;</td>

Hmm - musste ein Dummy-Leerzeichen einfügen, damit es hier richtig gerendert werden konnte

Der erste wird vom HTML-Parser nicht als Leerzeichen behandelt, der zweite. Infolgedessen wird nicht garantiert, dass das "" innerhalb eines bestimmten HTML-Markups angezeigt wird, während der nicht zerbrechliche Bereich immer angezeigt wird.

  sollte als Leerzeichen behandelt werden.

   sollte als zwei Leerzeichen behandelt werden

'' kann als nicht interessantes Leerzeichen behandelt werden

'' + '' kann als einzelnes '' behandelt werden

  ist stapelbar, dh Sie können mehrere Räume zusammen erstellen.

HTML analysiert nur ein Leerzeichen und lässt den Rest fallen ...

Wenn Sie fünf Leerzeichen möchten, würden Sie 5 x platzieren  

@ Zoidberg ist richtig, Beispiel:

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

zeigt kein Leerzeichen zwischen den Header-Markups an, mit

& nbsp ; 

wird Platz machen :)

Bei Zeilenumbrüchen wird die Zeile nicht unterbrochen, wenn Sie ein $ bnsp verwenden. weil es ein "nicht brechender Raum" ist. Dies kann wichtig sein, wenn Sie bestimmte Produktnamen oder dergleichen haben, die immer zusammen geschrieben werden sollen.

Kann interessant sein, wenn Sie ein Leerzeichen als Trennzeichen in Zahlen verwenden müssen (müssen), z. B. 12344567, das in Frankreich 12 344 567 angezeigt wird. Ohne das würde die Linie in der Mitte der Zahl brechen, sehr hässlich. Test: 12 344 567

TLDR; Neben der akzeptierten Antwort; Einer ist implizit und einer ist explizit.

Wenn der von Ihnen geschriebene oder von einer Anwendung / Bibliothek / einem Framework generierte HTML-Code von Ihrem Browser gelesen wird, ist es am besten, die Bedeutung Ihres HTML-Codes zu interpretieren (der von Browser zu Browser unterschiedlich sein kann). Wenn Sie die HTML-Entitätscodes verwenden, sind Sie spezifischer für den Browser. Sie teilen ihm ausdrücklich mit, dass Sie dem Benutzer ein Zeichen anzeigen möchten (und nicht, dass Sie nur Ihren HTML-Code für eine bessere Lesbarkeit für den Entwickler platzieren).

Genauer gesagt, wenn der Ausgabe-HTML-Code wäre:

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

Der Browser würde nur ein Leerzeichen zwischen all diesen Wörtern rendern (auch diejenigen, die zur besseren Lesbarkeit für Entwickler eingerückt wurden.

Wenn Sie jedoch dasselbe setzen und nur das <p>Tag in Folgendes ändern :

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

Dann würden die Leerzeichen gerendert, wie Sie es expliziter angewiesen haben. Es gibt eine gewisse Geschichte, diese Räume für das Styling zu verwenden. Diese Verwendung wurde etwas verringert, als CSS gereift ist. Es gibt jedoch immer noch gültige Verwendungen für viele der HTML-Zeichenentitäten: Vermeiden einer unerwarteten / unbeabsichtigten Interpretation (z. B. wenn Sie Code anzeigen möchten). Das w3 hat eine großartige Seite, auf der die anderen Zeichencodes angezeigt werden .