用margin和padding控制段落间距最直接，p标签默认靠浏览器内置margin产生间距，应统一设margin: 0.8em 0，避免br换行、line-height混淆及margin合并问题。
用 margin 和 padding 控制段落间距最直接
HTML 本身没有“段落间距”属性，<p></p> 标签默认有浏览器内置的 margin-top 和 margin-bottom（通常约 1em），所以段落之间看起来有空隙。真正可控的是 CSS 的 margin（外边距）和 padding（内边距）。
常见错误是只改 margin-top 忽略 margin-bottom，导致相邻段落间距翻倍；或在父容器上加 padding 却没意识到它会撑开容器高度。
- 想统一所有段落间距：给
p设margin: 0.8em 0;（上下 0.8em，左右 0） - 只想调某个段落：加 class，比如
<p class="tight">…</p>，再写.tight { margin-bottom: 0.5em; } - 避免父子 margin 合并（collapsing margin）：给父容器设
overflow: hidden;或padding: 0.01px;
<br> 不是控制段落间距的合理方式
用多个 <br> 换行来“撑开”段落，看似简单，实则破坏语义、不可维护、响应式下极易错乱。它只是换行符，不是间距控制机制。
典型问题包括：缩放页面时 <br> 数量固定，间距不随字体缩放；打印样式中可能被忽略；屏幕阅读器会逐个读出“换行”，影响可访问性。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要写
<p>第一段</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <br><br><p>第二段</p> - 如果必须兼容老系统且不能用 CSS，优先用
<div> 包裹，而非堆 <code><br> - 现代项目中，
<br>只应在纯文本换行场景使用（如地址、诗行） -
line-height推荐用无单位数值（如1.5），避免继承计算错误 - 若同时设置
font-size和line-height，注意单位一致性：用em或rem易受父级影响，无单位最稳 - 想微调某段文字的紧凑感？改
line-height，别动margin - 推荐写法：
p { margin: 1.2rem 0; }（1.2 倍根字号） - 若需更精细控制，可用
clamp()：margin-bottom: clamp(0.75rem, 2vw, 1.25rem); - 慎用
vh/vmin：它们基于视口，和文字大小无关，易造成排版断裂
用 line-height 调整段内行距，不影响段落间距
line-height 控制的是段落内部文字行与行之间的距离，和段落之间的空白（即 margin）无关。混淆这两者是新手高频误区。
例如设 p { line-height: 1.6; }，只是让每行文字垂直居中在 1.6 倍字号的高度里，并不会让两个 <p></p> 标签离得更远——那还得靠 margin。
响应式段落间距要避开固定像素值
用 margin: 24px; 在桌面端看着刚好，但在小屏上可能撑满一屏。真实项目中，段落间距应随字体大小弹性变化。
根本原则：用相对单位（em、rem、无单位 line-height）代替 px，让间距跟随文本流自然缩放。
margin-bottom: 1rem 和 margin-top: 1rem 最终只生效 1rem，而不是 2rem。
