代碼：
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>
默認效果顯示圖：
添加字體后的效果顯示圖：
