代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML中的& nbsp; & ensp; & emsp;等6种空格标记</title> 6 <style type="text/css"> 7 *{ 8 margin: 0 auto; 9 } 10 body{ 11 margin: 15vh 0; 12 } 13 button{ 14 /* font-family: "仿宋"; */ 15 display: block; 16 height: 18vw; 17 width: 70vw; 18 border-radius: 50px; 19 outline: none; 20 font-size: 3rem; 21 color: #fff; 22 } 23 </style> 24 </head> 25 <body> 26 <!-- 不会累加的（只算1个），且该空格占据宽度受【字体】影响明显而强烈 --> 27 <button type="button">提 交</button><br /> 28 <!--   占据的宽度正好是1/2个中文宽度，且基本上不受字体影响 --> 29 <button type="button">提  交</button><br /> 30 <!--   占据的宽度正好是1个中文宽度，且基本上不受字体影响 --> 31 <button type="button">提 交</button><br /> 32 <!--   占据的宽度比较小，它是em之六分之一宽 --> 33 <button type="button">提      交</button><br /> 34 35 <!-- ‌ （零宽不连字）是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字， 36 而是以这两个字符原本的字形来绘制 --> 37 <!-- ‍ （零宽连字）是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间， 38 使得这两个本不会发生连字的字符产生了连字效果 --> 39 40 </body> 41 </html>
默认效果显示图：
添加字体后的效果显示图：
