行内替换元素（如）能设width/height因其具有固有尺寸，css可直接覆盖；行内非替换元素（如）无固有尺寸且不生成独立块盒，width/height被规范强制忽略，仅line-height、font-size、vertical-align影响其布局。
行内替换元素（如 <img>）为什么能设 width/height？
因为浏览器给它们分配了「固有尺寸」（intrinsic size），这是由内容本身决定的——比如图片文件自带宽高，<input> 有 UA 默认的尺寸。CSS 的 width 和 height 在这里不是“试图生效但失败”，而是**被设计为可直接覆盖固有尺寸**。它走的是替换元素的渲染管线，天然支持盒模型四方向控制。
行内非替换元素（如 <span></span>）的 width/height 为什么无效？
它没有固有尺寸，也不生成独立块盒；它的存在只是为了包裹文本，参与构建「行框（line box）」。浏览器根本不读取它的 width/height 声明——不是兼容性问题，是规范强制忽略。真正影响它视觉高度的只有：line-height（决定行内框高度）、font-size（影响 baseline 位置）、vertical-align（决定它在行框里怎么摆）。
padding-top/padding-bottom 在 <span></span> 里为何“可见但不撑开行高”？
这是最容易误判的行为：
- 背景色和边框会渲染出来，看起来像“撑高了”，但实际只是向行框外溢出
- 行框高度仍由该行所有行内盒中「最高组合值」决定（比如某个
span { line-height: 2em; }或带vertical-align: top的元素） - 用
getBoundingClientRect().height读到的是整行高度，不是<span></span>自身 content box - DevTools 的 Metrics 面板里能看到 padding 区域“悬空”在行框之外
如何快速验证一个元素是不是替换元素？
不用查文档，三步现场判断：
- 看它是否能响应
width/height并改变布局尺寸（<img>可以，<span></span>不行） - 看它是否默认有固有宽高（比如删掉
src的<img>仍占位，而空<span></span>几乎不可见） - 在 Chrome DevTools 中右键检查 → 查看 Computed 样式 → 搜索
intrinsic-size，有值的就是替换元素（现代 Chromium 支持该属性显示）
<span></span> 加 padding-top: 40px，页面上可能看到文字被顶起来了，但那不是它自己变高了，而是它悄悄抬高了整行的 baseline —— 同一行里所有其他 <span></span>、文本、甚至 <em></em> 都会被连带影响。这种“牵一发而动全身”的行框联动，才是行内布局最难调试的部分。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
