HTML中保留空格需用实体码或CSS，日常够用的4个是： （不换行空格）、 （半em宽）、 （1em宽）、 （1/6em窄空格）；优先用CSS控制空白更灵活可靠。

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

 ：最常用，不换行空格

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

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

  和  ：按字体单位控制宽度

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

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

 ：窄空格，数学和单位场景专用

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

立即学习“前端免费学习笔记（深入）”；

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

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

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

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

推荐写法：
价格：¥99
旧写法（不推荐）：
价格：    ¥99

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

# css  # word  # html  # go  # html5  # 浏览器  # google  # 堆  # 严格模式  # margin  # padding  # 换行  # 思源  # 更灵活  # 看着  # 也不  # 多个  # 这两个  # 用了  # 得多  # 半个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  如何快速重置建站主机并恢复默认配置？  Laravel怎么调用外部API_Laravel Http Client客户端使用  使用spring连接及操作mongodb3.0实例  Laravel怎么在Blade中安全地输出原始HTML内容  linux写shell需要注意的问题(必看)  如何在香港服务器上快速搭建免备案网站？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  JavaScript如何操作视频_媒体API怎么控制播放  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  如何登录建站主机？访问步骤全解析  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  java ZXing生成二维码及条码实例分享  WordPress 子目录安装中正确处理脚本路径的完整指南  JavaScript如何实现倒计时_时间函数如何精确控制  如何快速选择适合个人网站的云服务器配置？  在线制作视频的网站有哪些,电脑如何制作视频短片？  高端网站建设与定制开发一站式解决方案 中企动力  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  浅析上传头像示例及其注意事项  ,网页ppt怎么弄成自己的ppt？  js实现获取鼠标当前的位置  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  敲碗10年！Mac系列传将迎来「触控与联网」双革新  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  高端云建站费用究竟需要多少预算？  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  如何基于云服务器快速搭建网站及云盘系统？  网站建设保证美观性，需要考虑的几点问题！  javascript如何操作浏览器历史记录_怎样实现无刷新导航  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  如何破解联通资金短缺导致的基站建设难题？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  利用JavaScript实现拖拽改变元素大小  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  如何在云服务器上快速搭建个人网站？  Laravel如何配置Horizon来管理队列？（安装和使用）