line-height 是控制行距的唯一正确属性，应使用无单位数值；段落间距用 margin-bottom；外边距折叠是规范行为；避免滥用 p 标签破坏语义。
line-height 是控制段落内部行距的唯一正解
想调“文字行与行之间的距离”，必须用 line-height，不是 margin，也不是 padding。后者改的是段落盒子整体位置或内边空间，和行内基线对齐无关。
line-height 接受数字（如 1.6）、单位值（如 24px）或百分比（如 160%）。推荐用无单位数字——它基于当前 font-size 计算，缩放/响应式时自动适配，且可被子元素继承。
- 设
p { font-size: 16px; line-height: 1.6; }→ 实际行高 = 25.6px - 设
p { line-height: 24px; }→ 无论字体变大变小，行高永远卡死在 24px，易导致行间挤压或空洞 - 避免
line-height: normal—— 浏览器实现不一，Chrome 和 Safari 渲染结果可能差 2–3px
margin-bottom 是调整段落之间间距的合理选择
想控制“一段文字和下一段之间的空白”，该用 margin-bottom，而不是 margin-top。原因很实际：你几乎不会单独控制某一段的顶部空隙，但经常需要统一控制段落底部留白，比如列表、文章正文、卡片描述等场景。
全局写 p { margin-bottom: 1.2em; } 比每个 <p> 手动加 class 更可持续；但要注意：如果 p 是容器第一个子元素，它的 margin-top 会和父容器发生外边距折叠（margin collapse），导致顶部空白消失。
立即学习“前端免费学习笔记（深入）”；
- 只设
margin-bottom，不碰margin-top，能规避大部分折叠干扰 - 若必须保留首段顶部空隙，给父容器加
padding-top，而非给首段加margin-top - 用
em或rem单位，让间距随字号缩放，比固定px更健壮
margin 折叠不是 bug，是 CSS 规范定义的行为
两个相邻 p 各设 margin-bottom: 20px 和 margin-top: 20px，实际间距只有 20px，不是 40px——这不是渲染错误，而是规范明确要求的“垂直外边距合并”（collapsing margins）。
折叠触发条件很具体：两个块级元素在文档流中垂直毗邻、中间无 border/padding/content 分隔。常见于：p + p、h2 + p、父容器与首个子 p。
- 调试时发现“第一段没顶边距”“两段之间空隙比预期小”，先查是否发生了折叠
- 不想折叠？打断毗邻关系即可：给父容器加
padding-top: 1px，或border-top: 1px solid transparent - 别用
* { margin: 0; }全局清零——表单label、button、ul的默认间距全乱，后续补救成本更高
真正容易被忽略的细节：语义与样式的耦合风险
很多项目把 p 当成“视觉换行块”滥用，比如在卡片里塞副标题+描述，硬套两个 p，再靠 margin 控制间距。这看似省事，实则埋了三颗雷：
- 屏幕阅读器仍按段落语义朗读，两个
p会被读成两条独立陈述，破坏信息层级 - 一旦设计要求“副标题和描述之间不留空”，就得额外写样式覆盖，而原本用
span+display: block更轻量 -
p的默认margin在组件库中常被重置，你的业务代码可能突然失效
遇到非典型文本结构，优先考虑语义准确的标签组合（如 h3 + div），再用 CSS 控制视觉表现。样式可以妥协，语义不该将就。
