width和height对<span>等行内元素无效，因CSS规范规定行内元素不参与块级布局，盒模型属性被忽略；设display: inline-block可兼顾行内流与盒模型控制，但需注意vertical-align和空白符间隙问题。
为什么width和height对<span>这类行内元素无效
因为浏览器默认按文本流渲染行内元素，它们不参与块级布局，width、height、margin-top、margin-bottom等盒模型属性被忽略。这不是 bug，是 CSS 规范定义的行为。
把display设成inline-block最常用也最安全
它保留了行内元素“不换行”的特性，又获得块级元素的盒模型控制权，适合按钮文字、标签、图标旁文字等场景。
-
inline-block支持width、height、padding、margin（上下也生效） - 注意默认有基线对齐（
vertical-align: baseline），可能造成意外间隙，建议显式设vertical-align: top/middle/bottom - IE8+ 全面支持，无兼容性风险
- 示例：
<span style="display: inline-block; width: 100px; height: 32px; background: #007bff; vertical-align: middle;">操作</span>
用block还是inline-block？看是否需要换行
如果元素本该独占一行（比如标题里的强调词、独立操作项），用block更语义清晰；如果它必须和前后文字保持在同一行（如高亮关键词、带背景的链接），inline-block是唯一合理选择。
-
block会强制换行，破坏原有文本流，需额外处理浮动或display: flex来恢复并排 -
inline-block天然维持行内位置，但多个元素间会因换行符/空格产生约 4px 间隙（可设父容器font-size: 0或移除 HTML 空格规避） - 别用
flex或grid直接改行内元素——它们会隐式触发display: block，同样破坏行内上下文
还有哪些display值能生效？但慎用
table-cell、flex、grid确实也能让宽高生效，但它们引入了全新布局上下文，副作用远大于收益。
立即学习“前端免费学习笔记（深入）”；
-
table-cell需要配合table父容器，且vertical-align行为复杂，容易失控 -
flex会让元素变成弹性项目，width/height可能被flex-basis或伸缩规则覆盖 - 所有这些都会让样式调试变难，尤其在嵌套文本内容中——你只是想加个背景色，不是重写布局逻辑
真正要小心的是vertical-align和空白符间隙这两个隐形问题，它们比宽高不生效更常导致布局错位。改完display后第一件事，不是调尺寸，是看对齐和间距有没有突兀变化。
