不推荐用空格控制按钮间距，因其非语义化、影响无障碍、响应式差、维护困难；应优先使用CSS的margin或gap，兼容旧浏览器时用:not(:first-child)加margin。
不推荐用空格（ 或多个普通空格）控制按钮间距，这不是语义化、可维护、可访问的方案。
为什么 HTML 空格不适合做按钮间距
空格是文本内容的一部分，不是布局工具。把 或连续空格塞进 HTML 里强行撑开按钮，本质是用内容层解决表现层问题，会带来一连串副作用：
- 屏幕阅读器可能朗读出多余空格或停顿，干扰无障碍体验
- 响应式场景下，空格宽度固定（尤其
- 后续调整间距需反复修改 HTML，而不是集中改 CSS
- 复制页面文本时，用户可能意外复制大量无意义空格
- 多人协作时，其他人很难一眼看出“这里加了 3 个
按钮间距的正确实现方式（CSS 方案）
应该用 CSS 控制间距，主流有三类做法，按推荐优先级排序：
-
相邻按钮用
margin：比如.btn + .btn { margin-left: 8px; }，简洁、可继承、支持响应式断点 -
包裹容器用
gap（Flex 或 Grid）：如display: flex; gap: 12px;，现代浏览器支持良好，自动处理首尾间距 -
避免
padding撑开按钮自身内边距来模拟间距：这会改变按钮尺寸和点击热区，且无法控制按钮之间的距离
div.btn-group {
display: flex;
gap: 10px;
}
.btn-group > button {
padding: 6px 12px;
}
兼容性差时的降级处理（IE11 等老环境）
如果必须支持不支持 gap 的旧浏览器，可用 margin 配合选择器排除第一个元素：
立即学习“前端免费学习笔记（深入）”；
- 用
:not(:first-child)统一加左 margin：button:not(:first-child) { margin-left: 10px; } - 避免用
float+margin，容易触发 IE 的双倍边距 bug - 不要用
inline-block+ 字体大小 hack（如font-size: 0）来消灭空格——这反而又绕回了“用空格布局”的老路
真正麻烦的不是“怎么让两个按钮隔开”，而是后期要加 hover 动画、适配暗色模式、做键盘焦点管理时，那些散落在 HTML 里的 完全无法参与 CSS 控制，只能重写结构。
