标题间空行应使用CSS的margin-bottom控制,而非空格、 或; 仅用于防折行场景;需注意margin合并现象。

HTML 里打空格不能只靠敲空格键
HTML 默认会把连续的空白字符(空格、换行、制表符)合并成一个空格,所以直接在代码里敲多个空格或回车,页面上根本看不出来。想让空格“生效”,得用语义明确的方案,而不是靠 硬塞——尤其标题间空行这种场景, 是反模式。
标题层级间该用 margin 而不是空格字符
标题(~)是块级元素,天然独占一行。所谓“标题间空格”,本质是垂直间距问题,应该由 CSS 的 margin 控制,而非 HTML 内容层加空格或 。
-
margin-top和margin-bottom都可以调,但优先用margin-bottom:避免相邻标题因 margin 合并(margin collapse)导致间距不可控 -
浏览器默认样式对
~已设margin,直接覆盖比清空再重设更稳妥 - 若需统一规范,建议在 CSS 中集中定义,例如:
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 1.2em; }
什么时候才该用 ?
是“不换行空格”(non-breaking space),只在**需要阻止文字折行、或保持两个词之间强制有一个不可折叠空格**时才用。比如:
- 单位和数字之间:
100 px、5 kg - 人名/专有名词中防断行:
李 白 - 表格中对齐占位(极少用,通常应改用 CSS
text-align或white-space) - 绝对不要用它实现段落间距、标题空行、或“看起来多一个空格”的视觉欺骗
如果必须用纯 HTML 控制间距(无 CSS 权限)
极少数受限环境(如某些 CMS 富文本编辑器、邮件模板)禁用 CSS,此时可用语义化标签替代空格:
立即学习“前端免费学习笔记(深入)”;
- 用
包裹标题,利用段落默认上下 margin(但会引入额外 DOM 节点,语义错误) - 用
—— 这是退而求其次的 inline style,比标题
多行更可控 - 切忌写成:
——标题
子标题
是换行符,不是间距控制工具,语义错误且响应式下难维护
margin-bottom 统一控制,其他全是绕路。真正容易被忽略的是 margin collapse 行为——两个相邻标题的 margin-bottom 和 margin-top 不会叠加,而是取较大值,这点在嵌套结构里特别容易出错。










