Html和Markdown中的空格, ； &ensp； &emsp； 以及 &thinsp； &zwnj； &zwj；三种Unicode空格
HTML和Markdown可以用以下转义字符分隔字符
, , , , ,
的宽度，可运行于所有主流浏览器。其他几种空格（ , , , ,）在不同浏览器中宽度各异。
受font-size影响, 受letter-spacing和word-spacing影响;
另外5个,受font-size影响, 不受letter-spacing和word-spacing影响;
不换行空格,默认四分之一em
全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。
受css的word-spacing和letter-spacing控制, 其它不受;
等效Unicode的不间断空格: 十六进制写法 , 十进制写法
半角空格,半个em
全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。
此空格传承空格家族一贯的特性：透明的，
此空格有个相当稳健的特性，就是其 占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
受font-size影响, 不受letter-spacing和word-spacing影响;
全角空格,一个em
全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。
此空格也传承空格家族一贯的特性：透明的，
此空格也有个相当稳健的特性，就是其 占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
受font-size影响, 不受letter-spacing和word-spacing影响;
窄空格符,瘦弱空格符,六分之一em
全称是Thin Space。瘦弱空格，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。
受font-size影响, 不受letter-spacing和word-spacing影响;
零宽不连字符
全称是Zero Width Non Joiner，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为：
受font-size影响, 不受letter-spacing和word-spacing影响;
零宽连字符
全称是Zero Width Joiner，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D 。
受font-size影响, 不受letter-spacing和word-spacing影响;
三种 Unicode 空格
Html中写Unicode, 十进制用 &# 开头, 十六进制用 &#x 开头
等效 等效 : ----不间断空格
左 右效果
左 右效果
等效 : -------------------------半角空格
左 右效果
左 右效果
等效 ----------------------全角空格
左 右效果
左 右效果
不间断空格
半角空格
全角空格
测试
测试1
测试1的代码
DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>title>
head><body>
<script>
const ar0="nbsp,ensp,emsp,thinsp,zwnj,zwj".replaceAll(" ","").split(',');
const spaceAr = ar0.map(v=>"&"+v+";");
let t , htm001="";
function dw(style=""){
let str="";
for(let i=0;i<ar0.length;i++){
let v=ar0[i] , v2=spaceAr[i];
str+=`${style}">${v}:`;
Array.from(v).forEach(c=>str+=v2+c);
str+=v2+"中"+v2+"文"+v2+"圆"+v2+"圆"+v2+"圆"+v2+"hello"+v2+"world"+""
}
let str2=`
${style||"默认值"}
${str}
`
console.log(str2);
htm001+=str2;
}
dw();
dw("font-size:16px");
dw("font-size:16px; word-spacing:100px;");
dw("font-size:32px");
dw("font-size:32px; word-spacing:100px;");
document.write(htm001);
let explain001Text = `
可以看出
受font-size影响, 受letter-spacing和word-spacing影响;
&zwj 受font-size影响, 不受letter-spacing和word-spacing影响;
`;
let explain001Elem=t=document.createElement("explain001"); document.body.append(t);
t.style.cssText="font-size:20px; white-space:pre-wrap;"; t.innerText=explain001Text;
script>
<fieldset><legend>对应的html文本legend><pre style="white-space:break-spaces;"><code>code><script>document.currentScript.previousElementSibling.textContent=htm001;script>pre>
<style>legend{font-size:32px; font-weight:bold;}style>
body>html>
测试1的效果截图
<fieldset><legend>style= 默认值</legend>
<div style="">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset>
<fieldset><legend>style= font-size:16px</legend>
<div style="font-size:16px">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="font-size:16px">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset>
<fieldset><legend>style= font-size:16px; word-spacing:100px;</legend>
<div style="font-size:16px; word-spacing:100px;">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px; word-spacing:100px;">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px; word-spacing:100px;">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px; word-spacing:100px;">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px; word-spacing:100px;">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="font-size:16px; word-spacing:100px;">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset>
<fieldset><legend>style= font-size:32px</legend>
<div style="font-size:32px">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="font-size:32px">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset>
<fieldset><legend>style= font-size:32px; word-spacing:100px;</legend>
<div style="font-size:32px; word-spacing:100px;">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px; word-spacing:100px;">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px; word-spacing:100px;">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px; word-spacing:100px;">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px; word-spacing:100px;">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="font-size:32px; word-spacing:100px;">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset>