页面底部留白源于浮动塌陷、行内元素基线间隙、大屏栅格密度不足三类问题；需分别用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></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 里也会出现。
- 最稳解法：
vertical-align: bottom—— 让图片底边贴住行框（line box）底边，彻底消除空隙 - 若父容器是
display: flex或display: grid，vertical-align完全无效，此时空隙天然不存在 - 别忽略 HTML 源码中的换行或空格：
<img>\n<p></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元素撑高了，这种“假性留白”最难排查
真正麻烦的从来不是某一行 CSS，而是多个机制叠加后产生的复合留白——比如浮动父容器里放了一张未处理基线的图片，再套在一个未设 max-width 的大屏栅格中。先分清是哪一层在漏，再动手，不然越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
