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 的元素，压根不参与「块级盒模型」计算。你在开发者工具里看到 width 被划掉、标灰，是因为浏览器直接忽略它——CSS 规范明确禁止对纯 inline 元素应用 width/height。
它的“高度”实际由 font-size + line-height 决定，“宽度”完全由内容撑开。加了 padding-top，背景色可能显示出来，但不会推挤邻近元素，也不会改变行高。
改用 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
width: 50% 为 0？检查父容器的包含块是否真有宽度
百分比值不是凭空算的。width: 50% 依赖父容器的“包含块（containing block）”，而这个块不一定就是父元素：
- 如果父容器没设
width，或本身是position: absolute且无定位祖先（relative/absolute/fixed），那包含块可能退化为初始包含块（如 viewport），导致width计算异常 -
height: 50%更危险：父容器高度若为auto（由内容撑开），子元素的50%就等于0px；快速验证方法是给父容器临时加height: 100vh或height: 400px，看子元素是否立刻出现 - 注意：
box-sizing不影响width是否生效，但它决定这个值管哪一段——content-box（默认）下，width只算内容区，总宽 =width+padding+border
别用 float 或 position: absolute 硬压宽高
它们虽能让宽高“看起来”生效，但代价太大：
-
float会让元素脱离文档流，影响后续元素布局，还得手动清除浮动（clear: both或 BFC 触发） -
position: absolute让元素完全脱离流，失去与周围文字/图标的自然对齐关系，响应式下极易错位 - 真正需要精确尺寸和位置时，应先考虑是否该换语义更合适的标签（比如用
button替代span）
真正麻烦的往往不是“怎么让宽高生效”，而是生效之后，它和周围文字、图片、行高之间的对齐关系突然变得不可预测——这些细节比改一个 display 值更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
