HTML中的& nbsp; & ensp; & emsp;等6种空格标记

代码：

 

 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         <!-- &nbsp; 不会累加的（只算1个），且该空格占据宽度受【字体】影响明显而强烈 -->
27         <button type="button">提&nbsp;&nbsp;&nbsp;&nbsp;交</button><br />
28         <!-- &ensp; 占据的宽度正好是1/2个中文宽度，且基本上不受字体影响 -->
29         <button type="button">提&ensp;&ensp;交</button><br />
30         <!-- &emsp; 占据的宽度正好是1个中文宽度，且基本上不受字体影响 -->
31         <button type="button">提&emsp;交</button><br />
32         <!-- &thinsp; 占据的宽度比较小，它是em之六分之一宽 -->
33         <button type="button">提&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;交</button><br />
34         
35         <!-- &zwnj; （零宽不连字）是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，
36         而是以这两个字符原本的字形来绘制 -->
37         <!-- &zwj; （零宽连字）是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，
38         使得这两个本不会发生连字的字符产生了连字效果 -->
39         
40     </body>
41 </html>

 

默认效果显示图：

 

添加字体后的效果显示图：

 

posted @ 2019-05-10 11:00  Salicejy  阅读(2105)  评论(0)  编辑  收藏  举报