p标签默认有大间距是因为浏览器用户代理样式表为其设定了margin-top和margin-bottom（各约1em），而非css书写错误；line-height仅影响段内行距，不改变段落间距离；重置时应优先用css覆盖margin，避免滥用padding或全局清零。
为什么 p 标签默认有大间距
不是你写错了 CSS，而是浏览器自带的默认样式在起作用：p 元素默认有 margin-top 和 margin-bottom（通常是 1em 左右），这是用户代理样式表（如 Chrome 的 user-agent.css）规定的。哪怕你没写任何 CSS，这个间距也天然存在。
常见错误现象：只调 line-height 或 padding，结果段落上下距离纹丝不动——因为那根本不是行高或内边距导致的。
-
margin是唯一需要直接干预的属性 -
line-height控制的是段落内部行与行之间的距离，不影响段落块之间间隙 - 重置前建议用浏览器开发者工具（F12）选中
p，看 computed 样式里margin-top/margin-bottom的来源是否为user agent stylesheet
如何安全地重置 p 的间距
全局重置最常用也最稳妥的方式是覆盖默认 margin，但要注意副作用：
- 直接写
p { margin: 0; }会抹掉所有段落外边距，包括与其他元素（如标题、列表）的自然分隔，可能破坏阅读节奏 - 更推荐按需重置：比如只对特定容器内的
p清除间距，如.article-content p { margin: 0.5em 0; } - 若用 CSS reset（如 normalize.css），它已把
p的 margin 调整为更一致的值，但仍非零；需额外覆盖 - 不要用
padding替代margin来“模拟”间距——这会让点击区域变大、影响可访问性（如屏幕阅读器聚焦范围）
响应式场景下怎么避免间距错乱
移动端字体缩放、系统字号调整时，em 或 rem 单位的 margin 会跟着变，可能导致段落挤在一起或拉开太远。
- 用固定单位（如
px）虽稳定，但牺牲可访问性；优先用rem并确保根字体大小合理（html { font-size: 16px; }） - 对关键排版区域（如文章正文），可结合
@media微调：@media (max-width: 768px) { .post p { margin: 0.75rem 0; } } - 警惕
margin-collapse（外边距折叠）：相邻p的垂直 margin 会取较大值，不是相加；若想严格控制每段间距，中间插入<div style="clear:both"></div>或用display: flow-root阻断折叠（但通常没必要）
和其他元素混排时容易踩的坑
p 和 h1–h6、ul、blockquote 等块级元素并列时，它们各自的默认 margin 会相互作用，产生意外的“双倍”空白。
- 例如
h2默认有margin-bottom: 0.83em，后面紧跟p（margin-top: 1em），实际视觉间距 ≈ 1em（取大值），而非 1.83em——但人眼容易误判为叠加 - 解决方案不是逐个清零，而是用统一的 spacing scale 管理，比如定义
--space-md: 1rem，然后统一设p, h2, ul { margin: var(--space-md) 0; } - 特别注意：某些 CMS 或富文本编辑器输出的
p会带内联style，如<p style="margin-bottom: 20px"></p>，CSS 选择器权重可能压不住，得用!important或 JS 清洗（不推荐）
p 自己的 margin，还是它和上一个 h3 折叠后的结果，又或者被父容器的 padding 放大了——打开开发者工具，一层层点开 computed 样式，比猜快得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
