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

女爷i 2023-06-27 11:12 6阅读 0赞

原文出处：[https://www.cnblogs.com/Salicejy/p/css.html][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         
    27         <button type="button">提    交</button><br />
    28         
    29         <button type="button">提  交</button><br />
    30         
    31         <button type="button">提 交</button><br />
    32         
    33         <button type="button">提      交</button><br />
    34         
    35         
    37         
    39         
    40     </body>
    41 </html>

**默认效果显示图：**

**![format_png][]**

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

**![format_png 1][]**

[https_www.cnblogs.com_Salicejy_p_css.html]: https://www.cnblogs.com/Salicejy/p/css.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTI4NzY0MS8yMDE5MDUvMTI4NzY0MS0yMDE5MDUxMDEwNTgyNjE4Mi0xNjI0ODAzOTA0LnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTI4NzY0MS8yMDE5MDUvMTI4NzY0MS0yMDE5MDUxMDEwNTkyNTYxNi0xMTEzMDMwNDMxLnBuZw?x-oss-process=image/format,png