浏览器默认为p、h1–h6、ul、ol、blockquote等文本标签添加上下外边距，如p约1em、h1约0.67em–2.33em、ul/ol上下各1em、blockquote左右约40px；这些margin是相对单位，受font-size影响，且会发生外边距合并。
常见文本标签的默认 margin 值有哪些
浏览器会给 p、h1–h6、ul、ol、blockquote 等文本类标签自动添加上下外边距，这是它们“看起来有间距”的根本原因。不是你写了什么，而是浏览器默认加了 margin-top 和 margin-bottom。
典型默认值（以 Chrome/Firefox/Edge 为主）：
-
p：约1em（通常为 16px，随font-size变化） -
h1–h6：从0.67em到2.33em不等，h1最大，h6最小 -
ul/ol：默认带margin-block-start: 1em、margin-block-end: 1em，且内部li无额外 margin -
blockquote：左右有40px左右的margin-inline-start，上下约1em
注意：em 是相对单位，如果父元素 font-size 被改过，这些 margin 实际像素值也会变；Safari 旧版或某些 WebView 可能用固定像素（如 12px），关键布局建议显式写死，比如 margin: 16px 0;。
为什么只调 line-height 不能改段落间距
因为 line-height 控制的是段落内部行与行之间的距离，它不产生任何外部空白。你把 line-height 设成 3，只是让一个 p 内部变高了，但相邻两个 p 的间距依然由它们的 margin-bottom 和 margin-top 决定——而且会发生外边距合并（margin collapse）。
立即学习“前端免费学习笔记（深入）”；
也就是说，两个 p 各设 margin-bottom: 20px 和 margin-top: 20px，实际视觉间距不是 40px，而是 20px（取较大值）。这是最容易被忽略的底层行为。
真正生效的调整方式只有：
- 直接修改
p { margin: 1.2em 0; }这类规则 - 用
h2 + p { margin-top: 0.5em; }处理标题后紧跟段落的场景 - 给
p父容器加overflow: hidden或display: flow-root来触发 BFC，阻止 margin 合并（适合需要严格等距时）
padding 和 margin 在文本标签上混用的后果
对 p 或 h1 加 padding 是可行的，但它影响的是“内容到边框的距离”，不是“段落到段落的距离”。这会导致几个实际问题：
- 如果没设
border或background，padding完全不可见，纯属白加 - 加了
padding会撑大元素尺寸，在box-sizing: content-box（默认）下，width: 100%的p会溢出父容器 -
padding不参与外边距合并，所以无法替代margin来控制段落间逻辑间距 - 若同时设
margin和padding，视觉效果容易失控，尤其在响应式断点切换时
简单说：margin 是段落关系的“协议”，padding 是段落自身的“呼吸空间”。别用后者假装能解决前者的问题。
重置文本标签边距的实用策略
全局重置最常用也最危险的是 * { margin: 0; padding: 0; } —— 它确实清掉了所有默认边距，但也抹掉了所有语义化排版基础。更稳妥的做法是按需重置：
- 先清
body：确保body { margin: 0; padding: 0; }，消除页面四周白边 - 再单独处理文本流：
p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote { margin: 1.2em 0; } - 对列表项做微调：
ul, ol { padding-inline-start: 2rem; }（避免用padding-left，兼容 RTL） - 如需响应式缩放，用
rem或clamp()：p { margin: clamp(0.75em, 1.2vw, 1.2em) 0; }
最后提醒一句：不要依赖开发者工具里看到的“Computed”值直接抄写，那些是最终计算结果，可能来自用户代理样式、继承或层叠。真要调试，盯住 “Styles” 面板里被划掉的那条规则——它告诉你哪条 CSS 被覆盖了，这才是边距失控的真实源头。
