span设height无效因其默认display:inline，垂直方向盒模型属性被忽略；div可设height因默认display:block，宽高及上下边距均生效。
为什么 span 设了 height 没反应，而 div 可以
因为 span 默认是 display: inline，垂直方向的盒模型属性（height、margin-top、margin-bottom）被浏览器忽略；div 默认是 display: block，所有尺寸和边距都生效。
常见错误现象：span 加了 height: 40px 或 margin-top: 20px，页面毫无变化——不是 CSS 写错了，是它本就不支持这些值。
-
padding-top/padding-bottom在span上会渲染背景和边框，但不会推挤相邻行 -
line-height才是控制span垂直空间的实际手段（影响整行基线） - 真要设高宽或上下边距，别硬扛，直接用
display: inline-block或外层套div
a 标签能包 div 吗？什么时候能、什么时候不能
HTML5 允许 a 包含块级元素（比如 div、h2、p），但前提是语义合理且无障碍可用。
典型可用场景：整个卡片作为点击区域，内部含标题、描述、图片；此时 a 是唯一交互入口，且包裹内容逻辑上是一个“可点击单元”。
- 不能只为了布局方便强行把多个
div塞进a，尤其当里面还有表单控件（如input、button）时，会破坏语义和键盘导航 - 屏幕阅读器会把整个包裹内容读作一条链接，若内容冗长或结构混乱，反而降低可访问性
- 部分旧版浏览器或严格校验工具（如 W3C validator 的 HTML4 模式）仍会报错
哪些标签天生是块级，哪些天生是内联
不是看“长得像不像容器”，而是由 HTML 规范定义的默认 display 值决定。
块级标签（可设宽高、上下边距，独占一行）：div、p、h1–h6、ul、ol、li、section、article、header、footer
内联标签（不换行，宽高无效，水平边距有效）：span、a、strong、em、img、input、button
注意：img 和 input 是“替换型内联元素”，虽属内联，但允许设 width/height —— 这是特例，不是通则。
用 display 切换显示模式时容易踩的坑
用 display: block 把 span 变成块级，或用 display: inline 把 div 变成内联，看似简单，但实际影响远不止换行。
-
display: inline后的div会丢失width/height，且vertical-align开始起作用（可能意外对齐） -
display: inline-block是折中方案，但默认有空白间隙（来自 HTML 源码换行/空格），需用font-size: 0或注释删空格来消除 -
display: flex或display: grid会重置子元素的默认显示行为，此时再设display: inline可能被忽略
最常被忽略的是：一旦改了 display，元素就脱离了原始语义流，某些 CSS 属性（如 float、position: relative 的基准）的行为也会随之变化。改之前，先想清楚它在 DOM 流中的角色是否还成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
