span设了width和padding没反应是因为其默认display: inline，行内元素不响应width、height及垂直方向margin/padding；改用display: inline-block可同时保留同行排列并启用完整盒模型，但需处理vertical-align、html空格间隙及box-sizing等问题。
为什么span设了width和padding没反应
因为默认display: inline的元素（如span、a、strong）不响应width、height、垂直方向的margin和padding——这些属性在规范中对行内盒（Inline Box）无效。浏览器会忽略它们，但padding-left/right和margin-left/right仍生效，只是不会撑开行高或影响布局流。
display: inline-block是最直接可靠的解法
把行内元素显式设为inline-block后，它就同时具备行内元素的“不换行”特性和块级元素的完整盒模型控制权：
-
width、height立即生效 -
padding（含上下）和border完全渲染，且参与行高计算 -
margin（含上下）也起作用，但注意：相邻inline-block元素间的换行符/空格会产生约4px间隙，需用font-size: 0或注释删空格规避 - 仍保持“同行排列”，不会像
block那样强制换行
示例：<span style="display: inline-block; width: 100px; padding: 12px; background: #eee;">按钮</span>
替代方案：display: inline-flex或display: inline-table
这两个值也能让元素支持宽高与完整盒模型，但有特定适用场景：
-
inline-flex：适合需要内部弹性布局（如居中图标+文字）的行内容器，但IE11不支持inline-flex，只支持flex -
inline-table：兼容性好（IE8+），能设宽高、padding、border，但语义偏离，且内部必须套table-cell才能对齐内容，实用性低 - 避免用
float: left模拟——它会让元素脱离文档流，后续元素可能上浮，且清除浮动麻烦
别踩box-sizing的坑
即使用了inline-block，width默认仍只作用于content区。如果加了padding和border，总宽度会超出预期。这时必须配box-sizing: border-box：
-
box-sizing: border-box让width包含padding和border，更符合直觉 - 行内元素没有全局重置，所以每个
inline-block都要单独声明box-sizing - 不要依赖
* { box-sizing: border-box }——它对inline元素本身无效，只影响已转为inline-block或block的元素
真正容易被忽略的是：行内元素转inline-block后，vertical-align默认是baseline，会导致与其他行内内容对不齐。加vertical-align: middle或top才是常态操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
