标题视觉“顶格”源于默认 line-height 小且 margin-top 为 0；通过设置 line-height（如 1.4–1.6）使文字垂直居中，再用 padding-top 补足上方留白，可自然提升呼吸感，避免 margin-top 合并问题。
标题太靠上，本质是行内元素的默认垂直对齐和行高导致的视觉“顶格”感。不用大改结构，用 line-height 控制文字在行框内的上下位置，再配合 padding-top 或 margin-top 增加容器上方留白，就能自然拉开距离、提升呼吸感。
先看问题根源：h1–h6 默认没有上边距，且 line-height 小于字体大小时更显拥挤
浏览器对标题标签（如 h1）设置了很小甚至为 0 的 margin-top，默认 line-height 通常约 1.2，文字紧贴行框顶部。如果字体本身有上升部（ascender）或用了无衬线粗体，就会显得“撞到顶部”。这不是 bug，是 CSS 行盒模型的正常表现。
用 line-height 拉开文字与容器顶边的距离
给标题设置略大于 1 的 line-height（比如 1.4–1.6），能让文字在行框中自动垂直居中，视觉上自然下沉。注意：line-height 是相对于 font-size 的倍数，不是像素值，响应式更友好。
- 推荐写法：h2 { font-size: 1.5rem; line-height: 1.5; }
- 避免写死 px 值（如 line-height: 24px），否则缩放或换字体时易错位
- 如果标题只有一行，line-height 就是控制上下空白最直接的方式
用 padding-top 补足整体间距，兼顾背景与边框
当标题带背景色、边框或需要与上方元素保持固定距离时，padding-top 比 margin-top 更稳妥——它把空白算进元素内部，不会和外层 margin 合并，也方便加阴影或渐变背景。
立即学习“前端免费学习笔记（深入）”；
- 常见组合：h3 { padding-top: 1.2rem; line-height: 1.4; }
- 若已有 margin-bottom，可减少它来平衡整体节奏（比如设为 0.5rem 而非默认 0.875rem）
- 移动端可配合 clamp() 动态调整：padding-top: clamp(0.8rem, 2.5vw, 1.4rem);
慎用 margin-top：容易引发外边距合并，调试时易迷惑
单独给标题加 margin-top 看似简单，但父容器没 border/padding 时，它的上外边距会和兄弟元素或父容器“合并”，导致实际间距不可控。尤其在 Flex/Grid 容器里，margin 行为更复杂。
- 如果必须用 margin，建议同时设 overflow: hidden 或 padding: 0.01px 在父级阻断合并
- 更推荐统一用 padding + line-height 组合，逻辑清晰、兼容性好、易于维护
基本上就这些。不复杂但容易忽略——调好 line-height 是基础，再用 padding-top 定义“安全距离”，标题立刻稳得住、看得舒服。
