内联元素的 width/height 被浏览器忽略是 css 规范明确规定的标准行为，因其尺寸由内容决定；唯一例外是替换元素（如 img、input）；最稳妥解法是改用 display: inline-block，并注意 vertical-align、html 空格间隙及父容器高度对百分比宽高的影响。
内联元素的 width/height 为什么被浏览器忽略
因为这是 CSS 规范明确规定的：display: inline 元素的尺寸由内容决定，width、height、margin-top、margin-bottom 都会被浏览器直接忽略——不是 bug，是标准行为。
常见触发场景：<span></span>、<a></a>、<strong></strong> 这类默认 inline 的标签，直接写 width: 100px 完全没反应。
例外情况只有替换元素（如 <img>、<input>），它们天生支持 width/height，哪怕 display 是 inline。
display: inline-block 是最稳妥的解法
改 display 是最直接有效的手段，而 inline-block 在多数场景下比 block 更合适：
-
inline-block保留行内流特性：不换行、能和文字或其他 inline 元素并排 -
block会强制独占一行，容易破坏原有布局（比如把导航栏几个<a></a>拆成竖排） - 旧版 IE（如 IE7）需额外加
zoom: 1和*display: inline兼容，但现在基本可忽略
但别只写 display: inline-block 就完事，下面三点常被忽略：
- 默认
vertical-align: baseline，导致和文字错位，建议显式设vertical-align: top或middle - HTML 源码中的换行/空格会被渲染为一个空格，造成意外间隙；可用父容器
font-size: 0+ 子元素重设字体，或删掉 HTML 中的换行 - 如果是
<img>，设了inline-block后vertical-align才真正生效，能控制对齐方式
百分比宽高失效，往往卡在父容器高度上
width: 50% 通常能生效，因为父容器宽度一般有明确值；但 height: 50% 经常是 0px，原因很直接：父容器高度是 auto（由内容撑开），子元素的百分比就无从计算。
快速验证方法：给父容器加 height: 100vh 或 height: 400px，看子元素高度是否立刻出现。
注意：html 和 body 默认高度为 0，想让全屏布局下的百分比高度生效，必须显式写：
html, body { height: 100%; }
另外，box-sizing: content-box 是默认值，但它会让 width 只管内容区——加上 padding 和 border 后实际占位超出预期，这是溢出、换行、错位的常见根源。
别用 float 或 absolute 来“绕过” display 修改
有人试过 float: left 或 position: absolute 让 inline 元素响应宽高，但这不是替代方案，而是权衡取舍：
-
float会让元素脱离文档流，后续元素可能上移，且必须清除浮动 -
position: absolute要求父容器设position: relative，且元素完全脱离文本流，不再参与行内排版 -
display: table-cell虽支持宽高和垂直居中，但语义偏离、兼容性略差，只为设宽高不值得用
真正麻烦的往往不是“怎么设宽高”，而是设完之后和周围元素的对齐、间隙、换行行为突然变了——这些细节比 display 值本身更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
