行内元素设 width/height 无效，因其宽高由内容决定且浏览器忽略这些属性；应改用 inline-block（保留行内特性并支持盒模型）或 block（独占一行），其中 inline-block 是默认首选。
为什么 display: inline 元素设 width 和 height 没用
因为行内元素（display: inline）的宽高由内容决定，浏览器会忽略你写的 width、height、margin-top、margin-bottom。这是 CSS 规范定义的行为，不是 bug。
常见触发场景：给 <span>、<a>、<strong> 直接加 width: 100px，结果完全没反应。
改 display 是最直接的解法，但选哪个？
多数情况用 inline-block 更安全；只有明确需要独占一行时才用 block。
-
inline-block：保留行内流特性（不换行、能和其他文字/行内元素并排），同时支持宽高、上下 margin、padding -
block：强制独占一行，上下 margin 生效，但会破坏原有布局流（比如把原本在一行的几个<span>拆成竖排） - 注意：某些旧版 IE（如 IE7）对
inline-block支持不完整，需加zoom: 1; *display: inline;兼容，但现在基本可忽略
除了改 display，还有没有更轻量的替代方案？
有，但适用场景有限：
立即学习“前端免费学习笔记（深入）”；
- 用
float: left或float: right：能让行内元素接受宽高，但会脱离文档流，可能影响后续元素布局，且需清除浮动 - 用
position: absolute：完全脱离流，宽高自然生效，但需要父容器设position: relative，且不再参与文本流排版 - 用
display: table-cell：支持宽高，还能垂直居中，但语义偏离、兼容性略差，一般不推荐只为设宽高而用
这些都不是“替代”，而是权衡取舍 —— inline-block 仍是默认首选。
实际写法和容易踩的坑
别只写 display: inline-block 就完事，下面几点常被忽略：
- 默认有基线对齐（
vertical-align: baseline），可能导致和文字错位，建议显式设vertical-align: top或middle - 元素间空格会被渲染为一个空格（因 HTML 源码换行/缩进），造成意外间隙，可用父容器
font-size: 0+ 子元素重设字体，或移除 HTML 中的换行 - 如果原元素是
<img>这类替换元素，它本身是inline，但设display: inline-block后宽高生效，同时vertical-align也能控制对齐方式
span.btn {
display: inline-block;
width: 80px;
height: 32px;
line-height: 32px;
text-align: center;
vertical-align: middle;
}
真正麻烦的往往不是“怎么设宽高”，而是设完之后和周围元素的对齐、间隙、换行行为突然变了 —— 这些细节比 display 值本身更消耗调试时间。
