子元素margin-top“撑开”父元素是CSS外边距折叠规范行为；加padding-top: 1px可阻断，但更推荐display: flow-root、border-top: 1px transparent或transform等语义化方案。
为什么子元素margin-top会“撑开”父元素
这不是bug，是CSS规范定义的「外边距折叠（margin collapsing）」行为：当父元素没有上边界（比如border-top、padding-top或content内容），且子元素第一个是块级元素时，子元素的margin-top会和父元素“合并”，直接作用在父元素的外边缘上。
常见现象：父容器明明写了height: 200px，但实际高度变成200px + 子元素margin-top；或者父元素设置了background-color，却看不到顶部10px——那10px被“吸走”了。
加1px padding-top真能解决？怎么加才稳妥
能，但不是所有情况都推荐。给父元素加padding-top: 1px确实会阻断外边距折叠，因为一旦父元素有了padding，它就有了明确的“边界框”，子元素的margin-top就只能作用在内部空间里。
- 优先用
padding-top: 1px而不是0.1px——某些旧版Android WebView对亚像素渲染不可靠 - 如果父元素本身需要视觉上“顶到顶部”，加
padding后要配合box-sizing: border-box，否则宽度/高度会意外变大 - 若父元素是Flex或Grid容器，根本不会发生折叠——此时加
padding纯属多余
比padding更干净的替代方案
加1px只是“能用”，但未必“该用”。更符合语义和维护性的解法有：
立即学习“前端免费学习笔记（深入）”；
- 给父元素设
border-top: 1px solid transparent——视觉无影响，同样阻断折叠，且不改变盒模型尺寸 - 用
overflow: hidden或overflow: auto（需注意滚动行为变化） - 子元素改用
transform: translateY(10px)代替margin-top: 10px——脱离文档流，不参与折叠，但注意会影响position: sticky等行为 - 父元素设
display: flow-root（现代浏览器支持良好）——这是专为此类场景设计的值，语义清晰，无副作用
哪些情况加padding反而埋雷
看似简单的一行样式，在特定上下文中可能引发连锁反应：
- 父元素是
inline-block或table-cell时，padding-top会改变基线对齐，导致和其他元素错位 - 父元素有
background-image且使用background-position: top，1px padding会让背景图下移1px - 用CSS-in-JS或Tailwind时，硬加
pt-0.5（即padding-top: 0.125rem）可能和主题缩放逻辑冲突，尤其在用户设置系统字体放大时 - 父元素本身是某个UI库组件（如
Antd Card），擅自加padding可能覆盖其内建间距体系，后续升级容易出问题
真正要小心的，从来不是“加不加1px”，而是加完之后，这个父容器还在不在你预期的布局上下文中——它可能正悄悄影响着隔壁的flex换行、grid轨道分配，甚至媒体查询里的max-width计算。
