Quelle est la différence entre "& nbsp;" et " "?

Les deux signifient espace, mais y a-t-il une différence?

L'un est un espace insécable et l'autre est un espace régulier. Un espace insécable signifie que la ligne ne doit pas être enveloppée à ce stade, tout comme elle ne serait pas enveloppée au milieu d'un mot.

De plus, comme le souligne Svend dans son commentaire, les espaces insécables ne sont pas réduits.

L'entité  produit un espace insécable, qui est utilisé lorsque vous ne voulez pas de saut de ligne automatique à cette position. L'espace régulier a le code de caractère 32, tandis que l'espace insécable a le code de caractère 160.

Par exemple, lorsque vous affichez des nombres avec un espace comme séparateur des milliers: 1 234 567, vous utilisez des espaces insécables afin que le nombre ne puisse pas être divisé sur des lignes séparées. Si vous affichez la devise et qu'il y a un espace entre le montant et la devise: 42 SEK, alors vous utilisez un espace insécable afin de ne pas obtenir le montant sur une ligne et la devise sur la suivante.

En plus des autres réponses ici, les espaces insécables ne seront pas «réduits» comme le seront les espaces normaux. Par exemple, les deux

<p>Word1          Word2</p>

et

<p>Word1 Word2</p>

rendra le même sur n'importe quel navigateur, tandis que

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

conservera les espaces lors du rendu.

Pas une réponse autant que des exemples ...

Exemple 1:

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

Exemple n ° 2:

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

Et lien vers le violon .

Vous pouvez voir un exemple fonctionnel ici:

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

et

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

Même div, même texte, différents "espaces"

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

contre

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

Plusieurs caractères d'espacement normal (espace, tabulation et saut de ligne) sont traités comme un seul caractère d'espace blanc :

Pour tous les éléments HTML à l'exception des PREséquences d'espaces blancs séparant les «mots» (nous utilisons ici le terme «mot» pour signifier «séquences de caractères non blancs»). Lors du formatage du texte, les agents utilisateurs doivent identifier ces mots et les disposer selon les conventions de la langue écrite (script) et du support cible.

Alors

foo    bar

s'affiche comme

foo bar

Mais l'espace sans pause est toujours affiché. Alors

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

s'affiche comme

foo   bar

Comme déjà mentionné, vous ne recevrez pas de saut de ligne s'il y a un "espace sans coupure".

Attention également, les éléments contenant uniquement un "" peuvent apparaître de manière incorrecte, où & nbsp; marchera. Dans ie 6 au moins (pour autant que je me souvienne, IE7 a le même problème), si vous avez un élément de tableau vide, il n'appliquera pas de style, par exemple des bordures, à l'élément, s'il n'y a pas de contenu, ou seulement du blanc espace. Ainsi, les éléments suivants ne seront pas rendus avec des bordures:

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

Alors que les frontières apparaîtront dans cet exemple:

<td>& nbsp;</td>

Hmm -doit mettre dans un espace factice pour que le rendu soit correct ici

Le premier n'est pas traité comme un espace blanc par l'analyseur HTML, le second l'est. Par conséquent, il n'est pas garanti que le "" apparaisse dans certains balisages HTML, tandis que l'espace insécable apparaîtra toujours.

  doit être traité comme un espace blanc.

   doit être traité comme deux espaces

'' peut être traité comme un espace blanc non intéressant

'' + '' peut être traité comme un seul ''

  est empilable, ce qui signifie que vous pouvez créer plusieurs espaces tous ensemble.

HTML analysera seulement un espace '' et il supprime le reste ...

Si vous voulez cinq espaces, vous placez 5 x  

@Zoidberg a raison, exemple:

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

n'affichera pas d'espace entre le balisage d'en-tête, avec

& nbsp ; 

fera de l'espace :)

Lorsque vous avez des sauts de ligne, la ligne ne se coupera pas lorsque vous utilisez un $ bnsp; parce que c'est un «espace insécable». Cela peut être important si vous avez certains noms de produits ou autres, qui doivent toujours être écrits ensemble.

Peut être intéressant si vous (devez) utiliser un espace comme délimiteur dans les nombres, comme 12344567, qui est affiché 12 344 567 en France. Sans le, la ligne se briserait au milieu du nombre, très moche. Essai: 12344567

TLDR; En plus de la réponse acceptée; L'un est implicite et l'autre est explicite.

Lorsque le HTML que vous avez écrit ou généré par une application / bibliothèque / structure est lu par votre navigateur, il fera de son mieux pour interpréter ce que votre HTML signifie (qui peut varier d'un navigateur à l'autre). Lorsque vous utilisez les codes d'entité HTML, vous êtes plus spécifique au navigateur. Vous lui dites explicitement que vous souhaitez afficher un caractère à l'utilisateur (et non que vous espérez simplement votre HTML pour une lisibilité plus facile pour le développeur par exemple).

Pour être plus concret, si le HTML de sortie était:

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

Le navigateur ne rendrait qu'un espace entre tous ces mots (même ceux qui ont été mis en retrait pour une meilleure lisibilité du développeur.

Si, cependant, vous mettez la même chose et changez uniquement la <p>balise en:

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

Ensuite, il rendrait les espaces, comme vous l'avez indiqué plus explicitement. Il y a une histoire d'utilisation de ces espaces pour le style. Cette utilisation a quelque peu diminué à mesure que le CSS a mûri. Cependant, il existe encore des utilisations valables pour de nombreuses entités de caractères HTML: éviter une interprétation inattendue / involontaire (par exemple si vous vouliez afficher du code). Le w3 a une grande page pour afficher les autres codes de caractères .