inline元素设置height无效，因其盒模型不响应height和width；可改用inline-block或inline-flex，后者更可控且保持行内流。
inline 元素设置 height 为什么没用
因为 inline 元素的盒模型不响应 height 和 width，这是 CSS 规范明确规定的。浏览器会忽略这些声明，只按字体行高、内容本身撑开空间。常见于 、、 等默认 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 行内布局意图。正确做法是：
- 把父容器（比如
或）设为display: flex，再让子元素保持display: inline或改用display: block- 若目标是让多个
均匀排布并控制高度，更稳妥的是统一设为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; }/ ❌ 错误：给 span 直接设 flex，它就不再是 inline 行为 / span.bad { display: flex; / 这会让 span 变成块级容器，破坏行内上下文 / }
真正卡住的地方往往不是“能不能设高度”，而是没想清楚这个元素是否还必须留在文本流里——一旦跳出去，后续的换行、对齐、基线计算全都会变。
- 若目标是让多个
