页面空白过多源于浏览器默认样式、flex布局未约束容器高度、line-height设置不当及margin使用不合理；应统一CSS重置、合理设置容器高度与gap、优化行高与对齐方式。
页面空白过多是因为 margin/padding 没有统一归零或重置
浏览器对 <h1>、<p>、<ul> 等元素自带默认 margin 和 padding，初级项目常直接写内容不加 CSS 重置，导致段落间、标题下、列表外堆出大量不可控空白。
解决方式不是逐个删 margin-bottom，而是从根上控制：
- 在 CSS 开头加
* { margin: 0; padding: 0; }（简单粗暴，适合练手项目） - 更稳妥用
html, body { margin: 0; padding: 0; }+ 对常用块级元素单独设margin（如h1 { margin: 0.5em 0; }） - 避免在父容器上盲目加
padding，再让子元素用负margin拉回——这会破坏可维护性
flex 布局中 justify-content 和 align-items 导致意外留白
初学者常把 display: flex 一加，再配 justify-content: center 或 align-items: center，结果整个区域被“撑开”，上下左右全空——其实是容器本身高度没约束，align-items: center 把子元素垂直居中后，上下自然留白。
检查点：
立即学习“前端免费学习笔记（深入）”；
- 父容器是否设置了明确高度（如
height: 100vh）？没设就靠内容撑高，align-items: center会按“内容高度 + 容器高度”计算居中位置 -
justify-content: space-between在只有两个子项时，会让它们贴边、中间空一大截——改用flex-start或加gap更可控 - 别滥用
margin: auto居中：它依赖 flex 主轴方向，在 column 方向可能失效
line-height 和 font-size 不匹配造成行间虚高
文字周围看起来“空太多”，尤其在 <p> 或 <div> 里单行文本，大概率是 line-height 过大。比如 font-size: 16px 但 line-height: 2.5，每行实际占 40px 高，多出的 24px 全变成上下空白。
实操建议：
- 全局设
line-height: 1.5（无单位）比line-height: 24px更安全，它会随font-size缩放 - 对标题类元素（
h1~h6），显式写line-height: 1.2防止字体放大后行距爆炸 - 慎用
vertical-align: middle在 inline 元素上——它会和line-height叠加出奇怪间隙
使用 gap 替代 margin 实现模块间距更稳定
用 margin-bottom 控制卡片/列表项间距，容易遇到最后一个元素多出多余空白，或响应式断点时 margin 错位。而 gap 是 flex / grid 容器的原生属性，只作用于子项之间，不溢出。
示例对比：
.card-list {
display: flex;
flex-direction: column;
gap: 16px; /* ✅ 子项间固定 16px，首尾不额外加 */
}
<p>.card-list .card {
margin-bottom: 16px; /<em> ❌ 最后一个 .card 也会带 bottom，底部多出 16px </em>/
}注意：gap 在 flex 中需浏览器支持较新（Chrome 100+、Firefox 81+），老项目可用 grid 替代 flex 来保兼容；IE 完全不支持，此时仍得回归 :not(:last-child) 类选择器手动清除末项 margin。
空白问题本质是盒模型理解偏差，不是“调小数字”就能解决。重点盯住谁在产生空白（是元素自身 margin？父容器未限制高度？还是 line-height 溢出？），再选对应手段。越早建立“空白必有来源”的意识，越不容易陷入反复调像素的循环。
