HTML中普通空格会被浏览器合并忽略,需用 或white-space属性控制显示;但更推荐用CSS的min-width、padding、flex布局实现对齐与留白,兼顾可访问性与兼容性。

HTML 里普通空格不显示?用 或 CSS 控制
浏览器默认会把连续多个普通空格( )合并成一个,且首尾空格直接忽略。所以直接敲空格键写在按钮文字里,比如 ,实际渲染还是“确定”贴在一起。
要让空格“可见”,常见做法是:
- 用
(non-breaking space)代替空格:例如,能强制显示三个空格 - 给按钮加
white-space: pre;或white-space: pre-wrap;,这样 HTML 源码里的换行和空格都会保留 - 避免用空格对齐文字——模态框按钮宽度通常由内容撑开,靠空格“挤宽”不可靠,改用
min-width或padding
button 内部用 的坑:可访问性 & 复制粘贴问题
是真实字符,在屏幕阅读器中可能被读作“不间断空格”,影响语义;复制按钮文字时也会把 粘出来(变成乱码或不可见字符)。
更稳妥的做法是用 CSS 布局替代文本内空格:
立即学习“前端免费学习笔记(深入)”;
- 按钮统一设
min-width: 80px;+text-align: center; - 需要左右留白,优先用
padding-left/padding-right - 真要微调字间距,用
letter-spacing,但注意别过大导致阅读困难
模态框按钮组里“确认”“取消”不对齐?别靠空格硬凑
常见错误是给“取消”加一堆 让它和“确认”一样宽,结果在不同字体、缩放比例下错位更严重。
正确思路是让按钮组容器控制对齐:
- 把两个按钮包进










