HTML中的& nbsp; & ensp; & emsp;等6种空格标记 (实用）

最新推荐文章于 2023-12-21 23:35:02 发布

chelen_jak

最新推荐文章于 2023-12-21 23:35:02 发布

阅读量2.7k

点赞数

分类专栏： CSS 实用

原文链接：https://www.cnblogs.com/Salicejy/p/css.html

版权

实用同时被 2 个专栏收录

738 篇文章 3 订阅

订阅专栏

CSS

191 篇文章 0 订阅

订阅专栏

原文出处：https://www.cnblogs.com/Salicejy/p/css.html

代码：

 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>

默认效果显示图：

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

chelen_jak

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML中的& nbsp; & ensp; & emsp;等6种空格标记 (实用）

原文出处：https://www.cnblogs.com/Salicejy/p/css.html代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML中的& nbsp...
复制链接

扫一扫