display: inline元素的width和height被忽略是CSS规范强制行为，因其不生成独立盒模型，仅参与行框布局；高度由font-size和line-height决定，宽度由内容撑开；改用inline-block可启用宽高，但需处理vertical-align对齐和HTML空白间隙问题。
为什么 display: inline 元素的 width 和 height 被浏览器忽略
这不是 bug，是 CSS 规范强制行为：span、a、strong 这类元素默认为 display: inline，它们不生成独立盒模型，只参与「行框（line box）」布局。浏览器在计算布局时直接跳过 width 和 height 声明，开发者工具里这两个属性被划掉或标灰，就是明确告诉你：它没被读取。
它的视觉高度实际由 font-size + line-height 共同决定；宽度则完全由字符数、字体度量撑开。哪怕加了 padding-top，背景色能显示，但不会推挤邻近元素；margin-top/margin-bottom 更是彻底无效。
怎么让宽高生效：首选 display: inline-block
inline-block 是最常用、侵入性最小的解法——它保留同行排列能力，同时启用完整盒模型：宽高、上下 margin、padding 全部起作用。但必须处理两个默认副作用：
-
vertical-align: baseline是默认值，会导致元素和文字底部对不齐，建议显式写vertical-align: middle或vertical-align: top - HTML 源码中的换行/缩进会被渲染为约 4px 空隙；解决方式包括：
font-size: 0（设在父容器），子元素再重设字体；或移除 HTML 中的换行符；或用margin-left: -4px - 如果父容器是
flex或grid，inline-block会退化为普通块级行为，此时不如直接用flex子项属性（如flex: 0 0 80px）控制尺寸
height: 50% 为什么经常算出 0px
百分比高度依赖「包含块（containing block）」，而这个块不一定是父元素——它是最近的定位祖先（position: relative/absolute/fixed），找不到就回退到视口。常见陷阱是：父容器高度为 auto（由内容撑开），子元素的 50% 就等于 0。
验证方法很简单：给父容器临时加 height: 100vh 或 height: 400px，看子元素高度是否立刻出现。注意 html 和 body 默认高度为 0，全屏布局需显式写 html, body { height: 100%; }。
伪元素、替换元素这些“例外”也要小心
::before 和 ::after 伪元素默认也是 inline，不设 display: block 或 inline-block，width/height 同样无效；且 content 属性必不可少，哪怕只是 content: ''。
img、input 这类替换元素虽是行内级，但天生支持 width/height —— 它们是规范特例，不能套用到普通 span 上。别因为 img 能设宽高，就误以为所有 inline 元素都能。
真正麻烦的往往不是“怎么设宽高”，而是设完之后，vertical-align 错位、HTML 空格间隙、父容器包含块缺失、甚至 box-sizing 默认值导致总宽溢出——这些细节比改一个 display 值更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
