参考资料

  1. HTML 框架
  2. 如何检测开发者工具是否被禁用？
  3. Html转ASP/Perl有哪些
  4. HTML 删除字符效果和插入字符效果
  5. HTML 常用颜色
  6. 如何判断一个网站是否被采集
  7. HTML 颜色采用的是 RGB 颜色
  8. HTML 输出

HTML 中的空格详解

HTML 中的空格详解

基本概念

HTML 会合并连续的空白字符（空格、制表符、换行符）为一个空格

常用空格表示方法

1. 普通空格

(ASCII 32) - 键盘空格键输入的空格

2. HTML 实体

  •   - 不换行空格 (non-breaking space)

  •   - 半角空格 (en space)

  •   - 全角空格 (em space)

  •   - 窄空格 (thin space)

3. 特殊空格字符

  •   - 等同于  

  •   - 等同于  

  •   - 等同于  

  •   - 等同于  

功能对比

类型HTML实体宽度主要用途
普通空格 1个字符宽度常规文本间隔
不换行空格 1个字符宽度防止单词在行尾被断开
半角空格 1个en单位宽度中等间隔，约为普通空格2倍
全角空格 1个em单位宽度大间隔，约为普通空格4倍
窄空格 约1/5字符宽度微小间隔，如数字分隔

CSS 扩展控制

1. 空白处理属性

white-space: normal|nowrap|pre|pre-wrap|pre-line;

2. 文本缩进

text-indent: 2em; /* 首行缩进2个字符 */

3. 字间距

letter-spacing: 2px; /* 字符间距 */
word-spacing: 5px;   /* 单词间距 */

4. 填充和边距

padding-left: 10px;
margin-right: 15px;

实际应用建议

  1. 使用   保持内容不被换行分割

  2. 使用 CSS 控制布局间距而非多个空格

  3. 需要保留格式时使用 <pre> 标签或 white-space: pre

  4. 对齐文本优先考虑 CSS 而非空格填充

TAG：空格宽度普通间隔文本空白实体全角个字符单位