应检查 margin 和 padding 是否叠加或重复设置导致空白过多，常见原因包括重置样式后引入第三方库造成双重外边距、垂直 margin 合并引发预期外留白、flex/grid 的 gap 与子元素 margin 叠加、line-height 导致行内元素隐式空白，以及全局重置后未合理恢复语义化间距。
检查 margin 和 padding 是否叠加或重复设置
空白区域过多，最常见原因是元素自身 margin 或父容器 padding 被多次声明，尤其在重置样式（如 * { margin: 0; padding: 0; }）后又引入第三方 UI 库，容易导致双重外边距。浏览器会自动合并相邻块级元素的垂直 margin（即 margin collapse），但开发者常误以为“写了两次 20px 就是 40px”，实际可能仍是 20px，造成预期外的留白错觉。
- 用浏览器 DevTools 逐层检查计算后的
margin和padding值，重点关注 computed tab 中的 actual values - 避免在父子元素上同时设置垂直
margin，改用父容器padding或子元素margin-top/bottom二选一 - 对需要禁用 margin collapse 的场景，可给父容器添加
overflow: hidden、border或padding
flex / grid 容器的 gap 属性是否被意外启用
使用 display: flex 或 display: grid 时，gap 是一个独立于子元素 margin 的间距控制方式。如果父容器设置了 gap: 1rem，而子元素又各自有 margin: 0.5rem，视觉空白就会叠加，且难以直观归因。
- 检查父容器是否隐式继承了全局样式中的
gap（比如某些 CSS 框架默认设了gap: 0.5rem） - 若用
gap管理间距，子元素应尽量避免再设margin；反之，若依赖margin，则确保父容器gap为0或未声明 - 注意
gap在旧版 Safari 中需加-webkit-gap前缀，缺失可能导致布局异常，间接引发调试误判
line-height 和 font-size 对行内元素高度的影响被忽略
段落、按钮、链接等含文字的元素，即使没有显式设置 padding 或 margin，也会因 line-height 大于 font-size 而产生上下空白。这种空白属于行盒（inline box）的固有行为，DevTools 中不显示为 margin/padding，容易被当成“莫名多出的空间”。
- 对纯图标按钮或紧凑型文本容器，可设
line-height: 1或与font-size相等的值 - 避免在父容器设过大
line-height（如line-height: 2）后，子元素又用vertical-align: middle等方式微调，这会放大不可控空白 - 用
display: flex替代inline-block布局，能绕过 line-height 导致的基线对齐问题
重置默认样式后未补全表单/列表等元素的合理间距
执行 * { margin: 0; padding: 0; } 或使用 normalize.css 后，-
、 等元素的默认留白被清空，但后续未按设计系统重新定义合理间距，结果就是内容“挤在一起”或靠其他规则“意外撑开”，导致空白分布不均。
立即学习“前端免费学习笔记（深入）”；
/* 示例：有节制地恢复语义化间距 */
p, ul, ol, h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 1rem;
}
ul, ol {
padding-left: 1.5rem;
}
input, button, select {
margin: 0.25rem;
}- 不要全局重置后再靠每个组件单独加 margin——维护成本高且易冲突
- 优先基于语义标签定义基础间距，再用 utility class（如
mt-2）做局部调整 - 注意
fieldset、legend、textarea等表单元素有特殊默认表现，需单独测试
实际排布中，空白不是“要消灭的东西”，而是信息层级的呼吸感。真正难处理的，是那些混用了 margin/gap/line-height/box-sizing 的复合留白——它们不会报错，只会在不同设备或字体加载后悄悄变形。
