span设margin-top无反应，因其为行内元素，垂直方向margin被浏览器忽略；若需上下留白，应改用line-height、vertical-align或display:inline-block。
别先想“加不加样式”，先看内容在文档流里该不该换行——该换行用 div，不该换行用 span。
为什么 span 设了 margin-top 没反应？
因为它是行内元素，垂直方向的 margin 不参与布局计算，浏览器会忽略 margin-top 和 margin-bottom（除非配合 vertical-align 或改变行高）。padding-top/bottom 虽然能渲染，但只撑高行框，不推挤上下元素。
- 想让文字局部有上下留白？改用
line-height或vertical-align: middle - 真要控制上下间距？换成
display: inline-block，再设margin - 误以为“加了 class 就能当盒子用”，结果调试半天发现是显示类型限制
div 里塞 span 没问题，反过来为什么报错？
HTML 规范明确要求 span 只能包含“phrasing content”（即文本、a、em、img 等行内内容），不能合法嵌套 div、p、h1 等块级元素。浏览器虽会容错解析（比如把非法 div 提升到 span 外），但 DOM 结构已失真，JS 查询或 CSS 选择器可能失效。
- 常见现象：
<span><div>xxx</div></span>在开发者工具里看不到嵌套关系 - 检查器中
span节点下没有子div，实际被自动修正为兄弟节点 - 用
document.querySelector('span > div')返回null，不是 JS 写错了，是 HTML 不合法
Flex 容器里该用 div 还是 span 做子项？
取决于父容器的 display 类型和你是否需要它“自然参与主轴排列”。div 默认是块级，放进 display: flex 的父容器后自动变成 flex item；span 默认是行内，必须显式设 display: block 或 display: flex 才能成为有效子项，否则会被当作文本节点处理（可能合并、折行异常）。
- 父容器是
display: inline-flex？优先用span，它天然适配内联上下文 - 父容器是
display: flex？用div更省心，不用额外重置display - 用
span却忘了加display: block，结果多个span挤成一行且无法对齐
最常被忽略的点：语义退化不是从写错标签开始的，而是从“懒得换标签”开始的——明明该用 time 或 address，却习惯性套 span；明明是独立内容区块，却用 span + display: block 硬撑。显示效果可以骗过眼睛，但可访问性、SEO 和维护成本不会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
