页面底部留白源于浮动塌陷、行内元素基线间隙、大屏栅格密度不足三类问题；需分别用display: flow-root清除浮动、vertical-align: bottom消除图片缝隙、阶梯式增加栅格列数并缩gap来针对性解决。
页面底部留白不是单一问题，而是至少三类不同根源的视觉现象：浮动塌陷、行内元素基线间隙、大屏栅格密度不足。直接套用 margin-bottom: 0 或重置 * { margin: 0; padding: 0; } 基本无效，甚至会让问题更难定位。
浮动导致父容器高度塌陷，footer悬空
这是最常被误判为“底部留白”的情况：你看到的空白，其实是 footer 前面那个空容器（.main 或 .content）高度为 0，footer 直接从 0 位置开始渲染所致。
- 用浏览器 DevTools 悬停检查该容器，如果 height 显示为
0或远小于预期，就是它 - 清除浮动必须作用于浮动元素的直接父容器，不是 footer 自己加
clear: both - 现代首选：
display: flow-root—— 语义明确、无裁剪副作用、不干扰层叠上下文 - 兼容老浏览器时，
overflow: hidden能触发 BFC，但要盯住绝对定位内容是否被意外截断 - IE 完全不支持
flow-root，此时应放弃 float，改用display: flex或display: grid
图片或 inline 元素下方有几像素缝隙
这个“白边”不是 margin 或 padding，而是行内格式化上下文（IFC）中基线对齐（baseline）为 descender 预留的空间，哪怕只有一张 <img> 单独放在 <p> 里也会出现。
- 最稳解法：
vertical-align: bottom—— 让图片底边贴住行框（line box）底边，彻底消除空隙 - 若父容器是
display: flex或display: grid，vertical-align完全无效，此时空隙天然不存在 - 别忽略 HTML 源码中的换行或空格：
<img>\n<p>会被渲染为一个空格字符，产生约 4px 间隙 -
font-size: 0在父容器上可临时消灭该间隙，但需在子元素里重设字体大小，慎用 - 给
<img>加display: block也能解决，但会丢失图文混排能力
大屏下整页稀疏、“留白泛滥”
这不是 bug，是响应式断点没跟上物理宽度增长。12 列栅格在 2560px 屏上每列仅 213px，固定 gap: 1.5rem 占比变小，但人眼感知却是“全是空”。
立即学习“前端免费学习笔记（深入）”；
- 不要只加
max-width，要按阶梯增加列数：@media (min-width: 1440px) { grid-template-columns: repeat(16, 1fr); } -
gap需同步缩小，如从1.5rem逐步缩至1rem，否则列间显得松散 - 字体必须放大：
font-size: clamp(1rem, 2.5vw, 1.25rem)，禁用固定px值 - 避免滥用
auto-fit+minmax()大屏布局，手控列数更可控 - 检查是否有隐藏的
position: relative+ 负margin元素撑高了<body>，这种“假性留白”最难排查
真正麻烦的从来不是某一行 CSS，而是多个机制叠加后产生的复合留白——比如浮动父容器里放了一张未处理基线的图片，再套在一个未设 max-width 的大屏栅格中。先分清是哪一层在漏，再动手，不然越调越乱。
