display: inline元素width/height无效是CSS规范行为，因其不生成独立盒模型；视觉高度由font-size+line-height决定，宽度由内容撑开；改用inline-block可启用宽高，但需处理vertical-align和HTML空白间隙。
因为 display: inline 元素的宽高属性被 CSS 规范明确禁止参与布局计算，不是写错了，也不是浏览器 bug。
为什么 width 和 height 在 span、a 等元素上完全没反应
这类元素属于「行内框（inline box）」，只在行框（line box）中横向排列，不生成独立盒模型。你写的 width 和 height 在开发者工具的 Computed 面板里通常被划掉或标灰——浏览器直接忽略它们。
它的视觉“高度”实际由 font-size + line-height 决定；“宽度”完全由内容字符撑开。即使加了 padding-top，背景色也只覆盖文字区域上方，不会推挤邻近元素。
-
margin-top/margin-bottom不影响行高，可能造成重叠 -
padding-top/padding-bottom渲染可见，但不改变行框尺寸 - 临时验证：给元素加
display: inline-block，width立刻生效
改用 inline-block 后为什么还是“不对劲”
inline-block 确实启用完整盒模型，但有两个关键副作用常被跳过：
- 默认
vertical-align: baseline，导致元素和文字底部对不齐，看起来“上浮”或“下沉”；建议显式设为vertical-align: middle或top - HTML 源码中的换行/缩进会被渲染为约 4px 空隙；解决方式包括：
font-size: 0（父容器设，子元素再恢复）、移除 HTML 换行、或用margin-left: -4px - 若父容器
line-height过小，inline-block元素可能被截断；优先调大line-height，而不是硬加height
height: 50% 为啥经常算出来是 0px
百分比高度必须有参照——它依赖父容器的「包含块」高度。而这个包含块若为 height: auto（即由内容撑开），子元素的 height: 50% 就等于 0px。
- 常见陷阱：父容器没设
height，或本身是position: absolute且无定位祖先 - 快速验证：给父容器加
height: 100vh或height: 400px，看子元素是否立刻显示高度 - 注意：包含块不一定是父元素，而是最近的「已定位祖先」（
position: relative/absolute/fixed）
最易被忽略的一点：就算你把 display 改对了、vertical-align 设好了、font-size: 0 加上了，如果父容器高度仍是 auto，那 height: 50% 依然为 0——这和 inline 无关，是百分比计算规则本身的硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
