inline元素设置height无效，因其盒模型不响应height和width；可改用inline-block或inline-flex，后者更可控且保持行内流。
inline 元素设置 height 为什么没用
因为 inline 元素的盒模型不响应 height 和 width，这是 CSS 规范明确规定的。浏览器会忽略这些声明，只按字体行高、内容本身撑开空间。常见于 <span>、<a>、<strong> 等默认 inline 的标签。
改用 display: inline-block 的注意事项
它保留了 inline 的“同行排列”特性，又支持 height、width、padding、margin（上下也生效）。但要注意：
-
vertical-align默认是baseline，容易造成与其他 inline 元素对不齐，建议显式设为top/middle/bottom - 元素间存在空白符（换行/空格）会被渲染为一个空格，可能引发意外间隙；可用父容器
font-size: 0+ 子元素重置font-size消除 - 在 IE6/7 中需触发 hasLayout（如加
zoom: 1），但现代项目基本不用考虑
用 display: flex 替代时的典型误用
直接给单个 inline 元素设 display: flex 是错的——它会让该元素变成块级弹性容器，脱离文本流，破坏原本的 inline 行内布局意图。正确做法是：
- 把父容器（比如
<p>或<div>）设为display: flex，再让子元素保持display: inline或改用display: block - 若目标是让多个
<span>均匀排布并控制高度，更稳妥的是统一设为display: inline-flex（注意不是inline-block） -
inline-flex支持height，且子项默认 flex 排列，但自身仍参与文本流，不会换行
推荐方案对比与选择依据
多数场景下优先选 inline-block，简单直接；需要对齐、等高或动态伸缩时，用 inline-flex 更可控。避免无脑套 flex 到单个行内元素上。
立即学习“前端免费学习笔记（深入）”；
/* ✅ 推荐：用 inline-flex 控制单个 span 高度和内部对齐 */
span.icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #007bff;
color: white;
font-size: 12px;
}
<p>/<em> ❌ 错误：给 span 直接设 flex，它就不再是 inline 行为 </em>/
span.bad {
display: flex; /<em> 这会让 span 变成块级容器，破坏行内上下文 </em>/
}真正卡住的地方往往不是“能不能设高度”，而是没想清楚这个元素是否还必须留在文本流里——一旦跳出去，后续的换行、对齐、基线计算全都会变。
