统一段落间距应仅用 margin 控制，推荐 p { margin: 1.2rem 0; }，配合 :first-child 和 :last-child 微调首尾，避免使用 line-height、padding 或 br 等非语义方式。

保持段落间距一致，核心是统一控制 <p> 的 margin，而不是依赖浏览器默认或混用其他属性。

只用 margin 控制段间距离

浏览器默认给每个 <p> 加约 1em 的上下外边距，这是段落之间空隙的来源。要统一，就直接覆盖它：

• 推荐写法：p { margin: 1.2rem 0; } —— 只设上下 margin，左右为 0
• 避免只设 margin-top，否则相邻段落会因 margin 合并规则出现不可控空白
• 用 rem 或 em 单位，兼顾缩放、可访问性和响应式适配

首尾段落做微调

文章开头常不需要顶部空白，结尾也不需要底部留空，可用伪类精准处理：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• .article p:first-child { margin-top: 0; }
• .article p:last-child { margin-bottom: 0; }
• 注意：若需兼容 IE8 及更老版本，改用 class 标记首尾段，如 <p class="first">

line-height 和 padding 不用来调段距

line-height 控制的是段内多行文字的行高，不是段与段之间的距离；padding 增加的是段落内容到边框的内距，会撑大容器尺寸，影响盒模型计算。

立即学习“前端免费学习笔记（深入）”；

• 优化可读性时设 line-height: 1.6，但别指望它改变段间距
• 不要用 padding: 10px 0 模拟段距——这会让点击区域变大、影响对齐，且语义不清
• 更别用多个 <br> 或空 <p></p> 制造空白——破坏语义，维护困难

用 CSS 重置打基础

不同浏览器默认样式有差异，建议在项目开头引入轻量重置：

• 至少清掉默认 margin：p { margin: 0; }，再按需重新设定
• 配合 normalize.css 或自定义基础样式，能大幅减少跨浏览器排版偏差
• 全局统一后，再用 class 如 .lead、.small 对特殊段落做增量调整