inline元素无法设置width/height是因为规范强制忽略这些属性，改用inline-block可保留内联特性并支持尺寸控制，但需注意空白间隙及box-sizing影响。
不能直接让 display: inline 元素响应 width 和 height —— 浏览器会忽略这两个值。必须改显示类型，最常用且副作用最小的是 display: inline-block。
为什么 inline 元素设了 width/height 没反应
因为规范规定：display: inline 元素的宽高由内容和行高决定，width、height、margin-top、margin-bottom 都被强制忽略。这不是 bug，是标准行为。
-
<span></span>、<a></a>、<strong></strong>默认都是 inline - 即使加了
border或background，只要 display 没变，宽高依然无效 - 检查 computed style 时能看到
width: auto，但实际渲染不受控
用 inline-block 是最稳妥的替代方案
display: inline-block 保留了 inline 的“不换行”特性，又获得 block 级的尺寸控制能力，适合按钮、图标、标签等需要同行排列又需定宽高的场景。
- 支持
width、height、padding、margin（上下 margin 生效） - 元素仍参与文本流，不会像
float或absolute那样脱离布局 - 注意默认有空白间隙：多个
inline-block元素间会出现约 4px 间隙，源于 HTML 中的换行符或空格；可通过父容器设font-size: 0或移除模板中换行解决
其他可选方案及其适用边界
不是所有场景都适合 inline-block，得看布局约束：
-
display: flex+flex-direction: row：适合整组内联元素需要统一对齐、等分布局，但需包裹一层容器 -
display: table-cell：兼容老浏览器，但语义偏离，且需配合display: table父容器，灵活性低 -
position: absolute：完全脱离文档流，宽高生效，但必须依赖定位上下文，不适合文本内嵌元素 - 替换元素（如
<img>、<input>）例外：它们天生支持width/height，无需改 display
别漏掉 box-sizing 和包含块高度的影响
就算改成 inline-block，宽高也可能“看起来没变大”，常见干扰项：
-
box-sizing: content-box（默认）：你设的width: 100px只算内容区，加上padding和border就会溢出；建议统一写box-sizing: border-box - 百分比高度（
height: 50%）在 inline-block 上依然无效——它依赖包含块有明确高度，而 inline 元素的包含块是行框（line box），高度不可控 - 父容器若设了
overflow: hidden或max-width，可能裁剪或压缩子元素，需检查 computed style 中的 actual rendered size
真正卡住的地方往往不是 display 类型选错，而是忘了父容器没给高度、或者 box-sizing 还在 content-box 模式下算错总尺寸。动手前先打开开发者工具，盯着 Elements 面板里 “Computed” 标签页看真实生效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
