CSS/HTML 如何在网页中添加空格(琐碎知识点整理)

Posted 黑木令

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS/HTML 如何在网页中添加空格(琐碎知识点整理)相关的知识,希望对你有一定的参考价值。

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 戒焦戒躁 。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

  1. html空格符号代码

1.   :一个字符的半角的不断行的空格,如果需要在网页中插入多个空格,可以将“ ”代码写多遍;

2.   :一个字符的半角的空格,也可以将“ ”写多遍来插入多个空格;

3.   :两个字符的全角的空格,也可以将“ ”写多遍来插入更多的空格;

4.   :小于一个字符的空格;
  1. 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS/HTML 如何在网页中添加空格(琐碎知识点整理) </title>
</head>

<style>
.w_space-item {
  background-color: skyblue;
  height: 66px;
  line-height: 66px;
  font-size: 32px;
  margin: 32px 0;
}
.w_space-pre {
  white-space: pre;
}
</style>
<body>
<div>
<div>
  <div class="w_space-shel">
    <p class="w_space-item">空格-1: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例</p>
    <p class="w_space-item">空格-2: &ensp;&ensp;&ensp;&ensp;&ensp;示例</p>
    <p class="w_space-item">空格-3: &emsp;&emsp;&emsp;&emsp;&emsp;示例</p>
    <p class="w_space-item">空格-4: &thinsp;&thinsp;&thinsp;&thinsp;示例</p>
    <p class="w_space-item w_space-pre">空格:                     示例</p>
  </div>
</div>
</div>
</body>
</html>

  1. 图片示例

    c-sum.png

  2. 总结
1. 大家有没有想过为什么要使用html空格符号代码呢, 直接在键盘上敲几个空格不是更方便吗?当你实际操作的
时候, 你会发现 '默认情况下,无论你在html源代码中敲几个空格,在浏览器中运行都只显示一个空格', 所以我们
就需要使用 html 空格符号代码来实现网页中多个空格的效果 。

2. 前面说的前提是 "默认情况下", 为什么说在默认情况下呢? 因为我们还可以使用 css 中的 "white-space" 属性
来实现多个空格的效果; 就是将 "white-space" 属性值设置为 "pre": white-space: pre; 设置之后, 浏览器就会
保留 html 源代码中的空格和换行; 这下你在源代码中敲几个空格, 浏览器中运行就会用几个空格 。

3. 在软件开发中, 都是使用 html 空格符号 代码来实现多个空格的效果 。

如果对你有所帮助,大家可以点个关注;整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教,本人会及时更改 (本文原创, 如需转载,请注明出处) 。

以上是关于CSS/HTML 如何在网页中添加空格(琐碎知识点整理)的主要内容,如果未能解决你的问题,请参考以下文章

CSS 使用 a 标签的 mailto 属性在网页中链接 Email 地址(琐碎知识点整理)

如何在网页中用html代码插入多个空格?

为你的网页中添加一些空格

Android琐碎知识点,不断更新中

为你的网页中添加一些空格&nbsp;

琐碎知识点