因为css规范规定inline元素不生成独立盒模型，只参与行框布局，其width、height、上下margin等属性被忽略，高度由font-size和line-height决定，宽度由内容撑开。
为什么display: inline元素的width和height被忽略？
这不是浏览器 bug，是 CSS 规范明确规定的：inline 元素不生成独立的盒模型（box），只参与「行框（line box）」布局。你写的 width、height、margin-top、margin-bottom 在开发者工具的 Computed 面板里通常直接被划掉——浏览器压根不计算它们。
它的“高度”实际由 font-size + line-height 共同决定；“宽度”完全由内容（文字、图片等）撑开。即使加了 padding-top，背景色可能渲染出来，但不会推挤邻近元素，上下 margin 更是完全无效。
inline-block 是最稳妥的替代方案
它保留行内流位置（不换行、能和文字并排），同时启用完整盒模型：width、height、上下 margin、padding 全部生效，IE8+ 原生支持。
但要注意几个关键点：
- 必须显式设置
vertical-align（如vertical-align: middle），否则默认baseline会导致和文字底部对不齐 - HTML 源码里的换行/缩进会被渲染为约 4px 空隙；常见解法是父容器设
font-size: 0，子元素再重设字体大小 - 若父容器
line-height过小，inline-block元素可能被视觉截断；优先调大line-height，而不是硬加height -
img这类替换元素设为inline-block后，vertical-align才真正可控
别用 float 或 position: absolute 强行“修复”
它们虽能让宽高“看起来”生效，但代价太大：
-
float会脱离文档流，影响后续元素布局，还得手动清除浮动 -
position: absolute让元素完全脱离流，失去与周围文字/图标的自然对齐关系，响应式下极易错位 - 真正需要精确尺寸和位置时，应先考虑是否该换语义更合适的标签（比如用
button替代span）
真正麻烦的不是宽高设不上，而是设上之后的对齐失控
改一个 display 值只要一秒，但接下来要调的往往是：vertical-align 和周围文字的基线关系、line-height 对整行高度的影响、HTML 空白字符带来的间隙、父容器 font-size / line-height 的连锁反应……这些细节比改 display 值更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
