inline元素的margin-top无效是css规范明确规定的标准行为，因其生成行内盒，垂直布局由line-height和vertical-align决定，margin被静默忽略；解决需改display为inline-block等或用padding/transform替代。
为什么 inline 元素的 margin-top 完全没反应
不是浏览器 bug，是 CSS 规范明确禁止：span、a、strong 这类 display: inline 元素的 margin-top 和 margin-bottom 在布局计算中被静默忽略——连参与盒模型的机会都没有。
原因在于它们生成的是「行内盒」（inline box），垂直位置由 line-height、vertical-align 和文本基线共同决定，margin 不在该链路里。哪怕你写了 margin: 20px，上下值也会被丢弃。
-
display: inline-block是最直接解法：保留水平流式特性，同时激活完整盒模型，margin-top立刻生效 - 若需弹性布局，可选
display: inline-flex（注意 IE11 不支持） - 别用
display: block硬改——它会强制换行，破坏内联流 - 用
padding-top或transform: translateY()是替代方案，但语义和影响不同：padding撑内容区，transform不影响文档流
为什么子元素设了 margin-top，父容器却跟着上移
这不是失效，是外边距折叠（margin collapsing）：当父元素没有 padding、border、内容或 BFC 触发属性，且子元素是第一个块级子元素时，子元素的 margin-top 会和父元素上边缘“合并”，视觉上表现为父容器整体上移。
真正生效的永远是父子之间的边界定义方式，而不是单方面声明 margin-top。
-
overflow: hidden最常用：触发 BFC，阻止折叠，IE6+ 兼容 -
padding-top: 1px或border-top: 1px solid transparent同样可靠，无裁剪副作用 -
display: flow-root是现代标准写法，语义清晰，但不支持 IE - 避免只给子元素加
margin-top就以为完事——必须从父元素“设防”
浮动元素后非浮动子元素的 margin-top 为什么没效果
浮动元素脱离文档流，导致后续普通流元素失去顶部参考系。margin-top 依然被解析，但浏览器找不到可依附的上边界，于是忽略该值。
典型现象：浮动头图下方的文字描述写了 margin-top: 16px，却紧贴头图底部。
- 最稳方案是把间距挪到父容器：
.card { padding-top: 16px; }，不依赖清除或 BFC -
clear: both必须加在子元素自身或其前的空元素上，加在父容器无效 - 若必须保留子元素 margin API，用
display: flow-root给父容器创建 BFC - 别混用：
padding-top+margin-top会叠加，容易误判实际间距
margin-top 在某些浏览器里表现不一致，是兼容性问题吗
不是兼容性差异，而是规范执行严格度不同。Firefox 和 Chrome 严格遵循 CSS2.1 关于 margin 折叠的定义；IE6/7 反而“不合规”地没折叠，所以看起来“正常”。这恰恰说明失效是标准行为，不是 bug。
关键点在于：是否触发 BFC、是否有 border/padding、是否浮动、是否 inline —— 这些条件决定了 margin-top 是被计算、被折叠、还是被忽略。
真正容易被忽略的，是把问题归因于“浏览器不一致”，而没去检查父容器是否具备隔离边距的条件。一旦漏掉 border、padding 或 BFC 触发器，margin-top 就永远只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
