inline元素的margin-top被静默忽略是css规范行为，因其生成行内盒，垂直布局由line-height和vertical-align决定；解决需改display为inline-block等，或用padding/transform替代。
因为 span 是 display: inline 元素，它的 margin-top 根本不参与垂直布局计算——不是没写对，是规范直接忽略。
inline 元素的 margin-top 为什么被静默丢弃
浏览器解析到 span 的 margin-top: 20px，会读取、记录，但**不把它纳入行框（line box）高度计算**。它生成的是「行内盒」，垂直位置由 line-height、vertical-align 和文本基线共同决定，margin 不在该链条里。
- 开发者工具里能看到样式被应用，但「Computed」面板中
margin-top值不会影响布局尺寸 - 上方文字行不会下移，下方文字也不会被推开——上下 margin 都被跳过
-
margin-left和margin-right仍有效，能左右推开相邻内容
想让 span 有真正的上边距，得换盒模型
必须让它脱离纯行内流，获得独立的垂直空间控制权。最常用且兼容性好的做法是：
- 加
display: inline-block：保留水平流特性，同时激活完整盒模型，margin-top立刻生效 - 加
display: inline-flex：适合需要内部弹性布局的场景，但 IE11 不支持 - 避免用
display: block：它会强制换行，破坏原本的内联语义和排版流
示例：<span style="display: inline-block; margin-top: 12px;">文字</span>
替代方案要注意语义和副作用
如果不能改 display，可用其他属性模拟效果，但需清楚区别：
-
padding-top：会撑开span自身内容区，但不改变行高，可能被父容器line-height裁剪或与上下行重叠 -
transform: translateY(12px)：视觉上位移，但不占文档流空间，不影响其他元素布局 -
line-height或vertical-align：作用于整行，不是单个span，容易牵连其他行内元素
真正卡住人的地方，往往不是“怎么加 margin”，而是没意识到 span 的盒类型决定了它压根没有垂直外边距的发言权——得先换身份，再谈距离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
