加 border 能阻止 margin-top 传递，本质是打破外边距折叠：border（如 border-top: 1px solid transparent）为父元素创建了物理边界，使子元素 margin-top 无法与其“合并”，从而避免向上渗透。
给父元素加 border 为什么能阻止 margin-top 传递
子元素的 margin-top “跑”到父元素上，本质是 CSS 的外边距折叠（margin collapse）：当父元素顶部没有 border、padding 或内容分隔时，浏览器会把子元素的上外边距和父元素的“默认边界”合并成一个——看起来就像父元素被顶下去了。
border 的作用是物理打断这个折叠条件。哪怕只写 border-top: 1px solid transparent，也足以让父元素拥有一个“可见的盒边界”，从而阻止子元素的 margin-top 向外渗透。
- 必须是真实存在的 border：
border: none或border: 0不行；border-top: 1px solid transparent可用，视觉无感 - 不需要整圈 border：只需
border-top或border-bottom即可生效 - IE8+ 全兼容，无渲染副作用，也不影响 flex/grid 布局逻辑
用 padding 替代 margin-top 的实际取舍
把子元素的 margin-top: 20px 拆成父元素的 padding-top: 20px，是最语义清晰的解法——padding 本就是用来定义父子之间“内部留白”的，天然不参与外边距折叠。
- 如果父元素高度固定，记得同步调整：
height: calc(100% - 20px)或改用box-sizing: border-box - 避免混用：父元素设了
padding-top: 20px，子元素又写margin-top: 10px，结果就是 30px，容易误判间距来源 - 适合模块化场景：比如卡片容器、表单区块，统一用 padding 控制内边距，比到处调 margin 更可控
为什么 border 和 padding 方案常被低估
它们不是“权宜之计”，而是对 CSS 盒模型理解到位后的自然选择。比起触发 BFC 的 overflow: hidden 或 display: flow-root，这两个方案更轻量、副作用更少，且在老项目里几乎零风险。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：一旦用了 border 或 padding，你就得确认它是否影响了后续样式依赖——比如父元素有背景渐变、圆角或阴影，border 会叠加一层描边，padding 会撑大内部可用空间。这些细节不报错，但会让视觉对不上设计稿。
