display: inline元素设width和height无效，因css规范禁止对行内元素应用这些属性；可用inline-block、block+float、inline-flex、padding或绝对定位等替代方案。
为什么display: inline元素设width和height没用
因为行内元素（如<span></span>、<a></a>）的宽高由内容流决定，CSS规范明确禁止对纯display: inline元素生效width、height、margin-top、margin-bottom等盒模型属性。
常见错误现象：写了width: 200px但元素看起来完全没变；调试时发现尺寸栏显示“ignored”或灰色不可编辑。
- 只影响文本流中的“占位宽度”，不控制实际渲染盒尺寸
-
vertical-align仍起作用，但margin-top/bottom会被忽略 - IE8+ 和所有现代浏览器行为一致，不是兼容性问题，而是规范使然
display: inline-block能解决，但要注意这三点
它让元素保持行内布局上下文（不换行、受white-space影响），同时获得块级盒模型能力——这才是你要的折中方案。
但容易踩坑：
- 默认有基线对齐，导致相邻
inline-block元素底部留白（本质是vertical-align: baseline+ 字体下降空间），加vertical-align: top或bottom可消除 - HTML中元素间的空格/换行会被渲染成一个空格字符，造成意外间隙；要么删空格，要么父容器设
font-size: 0再重置子元素字体 - 在IE6/7中不原生支持，需触发hasLayout（如加
zoom: 1），但如今基本不用考虑
示例：
<span style="display: inline-block; width: 120px; height: 40px; background: #eee; vertical-align: top;">按钮</span>
还有哪些方式能让行内元素有宽高？
取决于你要什么效果，别硬套inline-block：
- 想完全脱离文本流？直接用
display: block+float: left或display: flex子项，但会破坏行内语义 - 要响应式缩放又带宽高？
display: inline-flex更可控，支持align-items等，且无基线间隙问题 - 只是临时撑开？用
padding比改display更轻量，尤其适合图标按钮类场景 - 绝对定位元素天然获得宽高控制权，但脱离文档流，慎用于需要参与文本换行的场景
移动端和Flex布局下，inline-block还常用吗
越来越少。现代布局中，inline-block的间隙问题和对齐逻辑反而成了维护负担。
更推荐的替代路径：
- 文字内嵌小控件（如标签、徽章）：用
display: inline-flex，一行代码解决居中+宽高+无间隙 - 导航栏、工具栏：父容器
display: flex，子项默认按行排列，flex: none锁住尺寸，比一堆inline-block加vertical-align干净得多 - 兼容老安卓 WebView（如UC内核）？确认是否支持
inline-flex，否则退回inline-block并加font-size: 0清间隙
真正难处理的，其实是那些嵌在富文本<p></p>里、又要固定尺寸又要随文字换行的元素——这时候inline-block仍是务实选择，只是得把vertical-align和间隙问题一次性写死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
