HTML5打空格需要记哪些代码_常用空格实体码清单【教程】

12次阅读

html中保留空格需用实体码或css,日常够用的4个是: (不换行空格)、 (半em宽)、 (1em宽)、 (1/6em窄空格);优先用CSS控制空白更灵活可靠。

HTML5打空格需要记哪些代码_常用空格实体码清单【教程】

HTML 里直接敲空格,浏览器会自动合并成一个;想保留多个空格、制表位或不换行空格,必须用实体码或 CSS。别背一,记住这 4 个就够日常用了。

 :最常用,不换行空格

这是你每天都会碰到的。比如“姓名: 张三”,防止冒号和名字被折到两行;或者表格里对齐文字时避免塌缩。

  • 它不会被浏览器合并,也不会在行尾换行
  • 连续写 5 个   就是 5 个可见空格
  • 别写成  (少个分号)——多数浏览器会容错,但严格模式下可能失效
  • 不能替代 CSS 的 text-indentpadding 做缩进,语义不对,可访问性差

:按字体单位控制宽度

这两个是“相对空格”,宽度取决于当前字体的 en(约半个 em)和 em(约一个字符宽)。适合排版对齐,比如中文文档里的项目符号缩进。

  • ≈ 0.5em,常用于单词间微调
  • ≈ 1em,接近一个汉字宽度,中英文混排时比   更协调
  • 注意:实际像素宽度随字体变化,不适合做固定像素布局
  • 不要指望它们在所有字体下都精准——思源黑体和 Courier New 下表现可能差 2px

:窄空格,数学和单位场景专用

宽度约 1/6em,典型用途是数字和单位之间,比如“100km”或“f(x)= x²”。普通正文里基本用不到。

立即学习前端免费学习笔记(深入)”;

  •   细得多,肉眼容易忽略,调试时建议临时加背景色确认
  • LaTeX 导出 HTML 时经常自动生成它,手动写没必要
  • 如果只是想让“100 km”看着舒服,用一个   更稳妥,兼容性无风险

CSS 替代方案更灵活,优先考虑

实体码本质是“把样式写进内容”,长期看难维护。真要控制空白,CSS 的 white-spacemargin 更可控。

  • white-space: pre-wrap 可保留换行+空格,适合代码块或地址显示
  • letter-spacingword-spacing 调整字距词距,比堆   干净
  • margin-left 实现缩进,语义清晰,响应式也好处理
  • 唯一绕不开实体码的场景:纯 HTML 邮件模板(很多客户端禁用 CSS)

推荐写法:

价格:¥99

旧写法(不推荐):

价格: ¥99

实体码不是越多越好,  这三个覆盖 95% 场景;其他像 属于特殊排版需求,遇到再查——临时 google “HTML zero width space” 比硬背清单快得多。

text=ZqhQzanResources