段落底部空白由浏览器默认给<p>元素设置margin-bottom: 1em造成；直接设p { margin-bottom: 0; }可清除，但需注意优先级、嵌套影响、margin合并及可访问性要求。
段落底部多出空白是谁加的？
浏览器默认会给 <p> 元素加 margin-bottom: 1em，不是你写的 CSS 加的，也不是“内容撑开”的错。这个默认值在所有主流浏览器里都存在，哪怕你没写任何样式，<p> 之间也会有空隙。
常见错误现象：
– 两段文字之间看起来“空了一行”，但检查元素发现没有额外标签
– 设置了 font-size: 0 或 line-height: 0 也没用
– 父容器用了 display: flex 或 grid，空隙依然在
直接改 margin-bottom 就够了吗？
够，但得看场景。单纯清空间距，最稳妥是覆盖默认值：
-
p { margin-bottom: 0; }—— 全局生效，简单粗暴 -
.text-block p { margin-bottom: 0.5em; }—— 只影响特定区域，留点呼吸感 - 如果段落嵌套在
div里且父级有padding-bottom，记得一并检查，别只盯着margin-bottom
注意：设成负值（如 margin-bottom: -0.2em）能强行吸住下一段，但容易导致文字重叠或打印时错位，不推荐常规使用。
立即学习“前端免费学习笔记（深入）”；
为什么有时改了没反应？
优先级被盖住了。CSS 层叠规则会让更具体的选择器或带 !important 的声明赢。
- 检查是否被其他规则覆盖：打开开发者工具，看
margin-bottom是否被划掉 - 避免滥用
!important；优先提升选择器特异性，比如用article p替代p - 如果用了 CSS-in-JS 或框架（如 Tailwind），确认是否启用了
preflight（它会重置默认margin） - 某些富文本编辑器输出的
<p>带内联样式，例如style="margin-bottom: 16px;"，必须用更高优先级覆盖
移动端和可访问性要注意什么？
把 margin-bottom 设得太小（比如 0 或 2px），对视力障碍用户用屏幕阅读器浏览时，可能让段落边界变模糊——因为视觉分隔没了，语义结构又没补上。
- 保留至少
0.25em的间距，兼顾紧凑排版与可读性 - 如果真要完全去除视觉间距，建议同时加
border-bottom或padding-bottom作替代分隔 - 不要仅靠间距区分段落；确保每个
<p>有明确语义，必要时用aria-label或标题层级辅助
最麻烦的情况其实是：你改了 margin-bottom，但相邻元素（比如 <h2> 或 <ul>）也有默认外边距，它们会合并（margin collapse）。这时候光调 p 不够，得一起看上下文。
