HTML如何打空格？3种简单方法

在HTML中直接输入空格字符（按空格键）通常无法显示多个连续空格，因为浏览器默认将多个空格合并为一个，以下是几种有效添加空格的方法,适用于不同场景：

常用HTML实体（推荐基础方案）

1. 不换行空格（ ）

   • 每个   显示为一个空格，连续使用可添加多个空格
   • 示例：文   本 → 显示为”文 本”
   • 适用场景：单词间固定间距、首行缩进

2. 其他空白字符实体

   

   • 窄空格  ：1/2个汉字宽度（如文本 间距）
   • 全角空格  ：1个汉字宽度（如文本 对齐)
   • 细空格  ：1/6汉字宽度（用于小间隔）

CSS控制方案（更灵活的现代方法）

<style>
  .custom-space {
    margin-right: 20px;    /* 右侧外边距 */
    padding-left: 2em;     /* 左侧内边距 */
    text-indent: 40px;     /* 首行缩进 */
    white-space: pre;      /* 保留空白符 */
  }
</style>
<p class="custom-space">CSS控制的空格效果</p>

• 关键属性：
  • margin/padding：元素内外留白
  • text-indent：段落首行缩进
  • white-space: pre：保留文本中的空格/换行（类似<pre>效果）

特殊标签与字符

1. <pre>
保留文本原有格式（包括空格和换行）：

   <pre>这  里  的  空  格  会  完  整  显  示</pre>

2. 零宽空格 ​
   不可见分隔符，用于长单词换行：
   very​longword → 可在"very"后换行