span是行内元素，无法设置width、height及上下margin/padding；需用display:block或inline-block转换渲染模式，但要注意语义合理性。
直接用 display: block 就行，但得注意它原本的语义和布局影响，不是加了就万事大吉。
为什么不能直接给 span 设 width 或 height
span 是原生行内元素，浏览器默认忽略它的 width、height、上下 margin 和 padding（左右 padding/margin 有效）。你设了也白设，这是规范行为，不是 bug。
- 常见错误现象：写了
span { width: 200px; height: 50px; }，但尺寸完全没变 - 本质原因：CSS 渲染引擎对行内元素的盒模型处理逻辑不同
- 验证方式：打开开发者工具，看 computed 样式里
width和height是否显示为auto
display: block 是最常用且可靠的转换方式
用 CSS 的 display 属性改写渲染模式，这是标准、兼容性好、语义无损的做法。
- 只需一条声明：
span { display: block; } - 之后就能正常设置
width、height、上下margin、padding、text-align等 - 注意：它会独占一行，前后自动换行——这和
div行为一致，不是“看起来像块”，就是块 - 如果只想让它能设宽高但不换行，得用
display: inline-block，而不是block
别用 float 或 position: absolute 来“假装”是块级
这两种方式会让元素脱离文档流，带来副作用，属于 hack 而非转换。
-
float: left后虽能设宽高，但父容器可能塌陷，需额外清除浮动 -
position: absolute会让元素脱离流，后续元素会“上移”填补空位，布局容易失控 - 它们改变的是定位行为，不是元素类型；
display才真正切换渲染上下文 - 现代项目里，除非兼容极老浏览器（IE6/7），否则没必要绕路
真正要小心的不是怎么转，而是转完是否还符合语义——span 本意是包裹一小段文本或行内内容，强行变成块级后，如果里面塞了 div、p 或整段布局，HTML 结构就容易失焦。这时候该换用 div，而不是硬撑着用 span + display: block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
