用 CSS 通过 line-height 控制段落内行高（推荐无单位值如 1.6），用 margin-bottom 控制段落间距；避免用 br 或多余 p 标签；用 :first-child 和 :last-child 精准控制首尾间距。
怎么用 CSS 控制 <p> 标签的行距和段落间距
HTML 本身没有“行距调整控件”，所有视觉上的行距（行高）和段落间距（段前/段后空白）都靠 CSS 控制。直接改 style 或外链样式表是最有效、最可控的方式。
常见错误是试图用 <br> 或多个 <p> 堆叠来“模拟”间距——这会让结构语义混乱，响应式时容易错位，打印或读屏器也会误判。
-
line-height控制单个段落内文字的行高（比如line-height: 1.6），推荐用无单位数值，避免继承问题 -
margin-top和margin-bottom控制段落之间的空白，通常只设margin-bottom即可，避免相邻段落双倍间距 - 别用
padding替代margin：它会撑大容器、影响背景色范围，且不解决段落间逻辑间隔问题
line-height 设太小或太大为什么文字会重叠或断层
行高不是“两行文字基线之间的距离”，而是“当前行内容盒的高度”。如果设成 line-height: 1，而字体实际 ascent + descent 超过容器高度，就会被截断；设成 line-height: 0.8 更大概率出现文字上下重叠。
真实场景中，中文常用 line-height: 1.5～1.8，英文可略低（1.4～1.6）。注意：像素值（如 line-height: 20px）在子元素字体大小不同时会失效，优先用无单位数值。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 继承行为：父级设了
line-height: 1.5，子元素字体变大，行高自动按比例放大；若设line-height: 20px，子元素就卡死在 20px，极易重叠 - 内联元素（如
<span>）受line-height影响但不占块级空间，调试时可用background-color看实际行框范围
想让第一段没上边距、最后一段没下边距，怎么写才不手动加 class
用 CSS 的 :first-child 和 :last-child 伪类最干净，前提是这些 <p> 是同一父容器下的直系子元素。
错误写法是给每个 <p> 都加 margin-bottom: 1em，然后单独给最后一个加 margin-bottom: 0——维护成本高，且新增段落时容易漏掉。
- 推荐写法：
article p { margin-bottom: 1em; }<br>article p:first-child { margin-top: 0; }<br>article p:last-child { margin-bottom: 0; } - 兼容性：IE9+ 支持，现代项目基本无压力；若需支持 IE8，只能退回到 class 控制（如
p.first/p.last） - 注意：如果
<p>中间夹着<h2>或<div>，:last-child就不生效——此时得用:last-of-type，但仅匹配同类型标签
移动端段落间距突然变大？可能是 viewport 或 font-size 导致的
不少人在 iOS Safari 上发现段落看起来“松散”，其实不是 margin 变了，而是系统默认对小字号做了字体放大（text-size-adjust），间接拉高了 line-height 计算基准。
更隐蔽的问题是：用 rem 设 margin-bottom: 1.5rem，但根字体被用户缩放或 UA 样式重置打乱，导致间距浮动。
- 稳妥做法：对正文段落用
em或无单位line-height，间距用em（如margin-bottom: 1.2em），保持与字体大小同比例缩放 - 禁用强制缩放：
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }，但慎用——会影响视障用户阅读体验 - 检查 DevTools 的 Computed 面板，看最终生效的
margin和line-height值，比猜更可靠
真正麻烦的从来不是“怎么设间距”，而是“什么时候该用 margin、什么时候该用 padding、什么时候该调 line-height”。这三个属性作用域不同，混用会导致布局不可预测，尤其在嵌套组件或 CMS 输出内容时。
