手机端上下间距过大主因是默认样式叠加与媒体查询覆盖不足；应优先用margin-block替代margin-top/margin-bottom以规避折叠，结构化布局则用gap控制子项间距。
手机端内容上下间距过大，通常不是“写多了 margin”，而是默认样式叠加 + 媒体查询没覆盖到位导致的。直接在 @media 里把 margin-top/margin-bottom 设为 0 往往治标不治本，甚至引发新错位。
为什么单纯压缩 margin 容易翻车
浏览器对 h1～h6、p、ul 等元素有不同默认 margin，且父子/兄弟间存在 margin 折叠（collapse）。你设了 margin-bottom: 1em，但父容器可能也设了 margin-top: 1em，实际只显示 1em 而非 2em——可一旦加了 padding 或 border，折叠就失效，间距突然变大。
- 用
margin-top和margin-bottom同时设置，极易触发不可预测的折叠行为 - 移动端屏幕窄，小单位（如
1rem）在小屏下可能等效于 16px，仍显宽松；而固定像素值（如24px）又无法随字体缩放 - 只改子元素 margin，忽略父容器或相邻模块的 margin-block-start/end，会导致“压着头、顶着脚”的挤压感
推荐用 margin-block 替代传统 margin
margin-block 是逻辑属性，代表块流方向（即垂直方向）的外边距，天然规避 margin 折叠问题，语义更清晰，也适配未来竖排中文等书写模式。
.article > * {
margin-block: 0.75em 0; /* 上间距 0.75em，下间距 0 */
}
.article > h2 {
margin-block-start: 1.25em; /* 标题顶部加大呼吸感 */
}
.article > :first-child {
margin-block-start: 0; /* 首个元素不额外上边距 */
}- 统一用
margin-block控制垂直节奏，避免混用margin-top/margin-bottom - 配合子选择器
>精准作用于直系子元素，防止深层嵌套污染 - 在媒体查询中只需覆盖
margin-block值，无需重复写两行：@media (max-width: 480px) { .article > * { margin-block: 0.5em 0; } }
配合 gap 处理容器内结构化间距
如果内容是卡片列表、按钮组、表单项等明确“容器+子项”关系，优先用 gap，它专为解决子项间距设计，不折叠、不溢出、首尾无多余空白。
立即学习“前端免费学习笔记（深入）”；
.form-group {
display: flex;
flex-direction: column;
gap: 12px; /* 所有子项之间固定 12px，干净利落 */
}
@media (max-width: 480px) {
.form-group {
gap: 8px; /* 小屏更紧凑，但保留最小触控距离 */
}
}-
gap不受父容器 margin 影响，也不参与 margin 折叠，比手动调margin更稳定 - 移动端建议
gap值控制在8px–12px，低于 8px 易误触，高于 12px 在小屏上浪费空间 - 若容器内含
input、button等可点击元素，gap还能自然保证隔离间距，无需额外 padding/margin
真正卡住手机端上下间距的，往往不是数值本身，而是没区分「结构间距」（用 gap）和「语义间距」（用 margin-block）。别急着在媒体查询里狂减像素，先理清哪一层该由谁控制——否则删掉一个 margin，可能让三处布局同时错位。
