用 css 通过 line-height 控制段落内行高（推荐无单位值如 1.6），用 margin-bottom 控制段落间距；避免用 br 或多余 p 标签；用 :first-child 和 :last-child 精准控制首尾间距。
怎么用 CSS 控制 <p></p> 标签的行距和段落间距
HTML 本身没有“行距调整控件”，所有视觉上的行距（行高）和段落间距（段前/段后空白）都靠 CSS 控制。直接改 style 或外链样式表是最有效、最可控的方式。
常见错误是试图用 <br> 或多个 <p></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）在子元素字体大小不同时会失效，优先用无单位数值。
- 继承行为：父级设了
line-height: 1.5，子元素字体变大，行高自动按比例放大；若设line-height: 20px，子元素就卡死在 20px，极易重叠 - 内联元素（如
<span></span>）受line-height影响但不占块级空间，调试时可用background-color看实际行框范围
想让第一段没上边距、最后一段没下边距，怎么写才不手动加 class
用 CSS 的 :first-child 和 :last-child 伪类最干净，前提是这些 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
<p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 是同一父容器下的直系子元素。
错误写法是给每个 <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></p>中间夹着<h2></h2>或<div>，<code>: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 输出内容时。
- 稳妥做法：对正文段落用
