p标签默认有上下外边距（通常1em），且相邻p元素会发生外边距合并，导致间距异常；最稳妥方案是显式重置margin，如p{margin:0}，并注意语义与布局协同。
为什么 p 标签总有多余的上下间距
浏览器对 p 标签有默认的 margin-top 和 margin-bottom（通常是 1em），不是“嵌套”导致的，而是每个 p 元素自身渲染时自带的。即使它在 div 或其他块级元素里，这个外边距依然存在，且会与相邻兄弟元素发生外边距合并（margin collapse）——这是你看到“间距比预期大”的根本原因。
直接重置 p 的 margin 最有效
最稳妥的做法是显式覆盖默认值，而不是依赖父容器或 display 变更：
p {
margin: 0;
}
如果只想清除上下边距、保留左右（比如需要水平居中文字但不要垂直空隙），用：
p {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
- 不要只写
margin: 0 1em;——这会把上下设为 0，但左右设为 1em，容易误伤布局 - 避免用
padding替代margin来“撑开”内容——它改变的是元素内部空间，不影响兄弟元素间距逻辑 - 若项目已用 CSS Reset 或 Normalize.css，检查它们是否已处理
p：Normalize 保留了p的 margin，Reset（如 Eric Meyer’s）通常清零
嵌套场景下 margin collapse 的干扰
当多个 p 连续出现，比如：
立即学习“前端免费学习笔记（深入）”；
<div>
<p>第一段</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>第二段</p>
</div>
两个 p 的 margin-bottom 和 margin-top 会合并，最终只保留较大的那个（比如都是 1em，就只算 1em，不是 2em）。但如果你给中间加了 border、padding 或 overflow: hidden 的父容器，collapse 就被阻止，反而可能让间距“变大”。
- 想彻底规避 collapse？给父容器设
padding: 0.01px或border-top: 1px solid transparent - 调试时打开浏览器开发者工具，选中
p，在“Computed”标签页看实际生效的margin值——常发现是继承自用户代理样式表（user agent stylesheet） - 不要用
display: inline或flex强行压平p——语义被破坏，屏幕阅读器可能跳过或误读
用 CSS 自定义属性统一管理更可控
如果项目中多处需要不同间距规则（比如文章正文用 1.2em，卡片内用 0.5em），推荐用 CSS 自定义属性解耦：
:root {
--p-margin: 1em;
}
.article p {
margin: var(--p-margin) 0;
}
.card p {
margin: 0.5em 0;
}
这样改一处变量就能批量调整，也方便主题切换。注意：自定义属性不支持 IE，如需兼容，得回退到传统类名控制。
真正麻烦的不是怎么删掉 margin，而是删完之后，其他靠这个默认间距呼吸的元素（比如 h2 + p 的视觉节奏）突然挤在一起——得同步检查相邻元素的流式关系。
