HTML5中空格会被浏览器自动合并，影响布局、可访问性、SEO和文本可选性；需用CSS white-space属性或语义化标签替代冗余空格与 。
HTML5 里空格不是“看不见就不存在”，静态网站尤其明显：它影响布局、可访问性、SEO 和文本可选性。直接结论是——不能依赖连续空格渲染，也不能靠 满天飞来对齐。
HTML 空格会被浏览器自动合并
这是最常踩的坑：写多个空格、换行、制表符，在 HTML 源码里看着整齐，但浏览器默认只保留一个空格（white-space: normal 行为）。比如：
Hello World
实际渲染等同于 Hello World，中间所有空格全被压成一个。
立即学习“前端免费学习笔记（深入）”；
- 只有
- 但
- 若真需要多空格排版（如诗歌、ASCII 图），必须加
white-space: pre或pre-wrap样式
不是万能对齐工具
很多静态站用 模拟缩进或对齐字段，比如：
这种写法脆弱且语义错误：Name: AliceAge: 28
- 屏幕阅读器会逐字读出每个
- 字体变化、缩放后对齐立刻错乱
- 移动端宽度收缩时，
- 正确做法是用 CSS
display: grid或flex布局，或语义化
静态生成器（如 Jekyll / Hugo）里的空格陷阱
模板引擎（Liquid / Go templating）输出 HTML 前，常因换行和缩进插入多余空白字符，导致 DOM 中出现意外的文本节点：
{% if page.author %}{% endif %}如果前后有换行+缩进，可能生成带空格的 #text 节点，影响 flex 项间距或 inline 元素对齐。
- Jekyll 默认不压缩输出，可用插件
jekyll-minifier或启用compress布局 - Hugo 可在模板中用
{{- ... -}}去除左右空白（注意短横位置） - 更稳妥的是用 CSS 控制：给容器设
font-size: 0，再给子元素重设字号，或用display: flex避免 inline 元素间隙
空格问题本质是 HTML 渲染规则 + CSS 排版逻辑 + 构建流程三者叠加的结果。最容易被忽略的，是模板引擎输出的“隐形空格”和屏幕阅读器对 的朗读行为——它们在静态站上线后才暴露，且难以通过视觉测试发现。
