display: inline元素的width和height被忽略是css规范行为，因其不生成独立盒模型，仅参与行框布局；高度由font-size和line-height决定，宽度由内容撑开；改用inline-block可启用宽高，但需处理vertical-align和html空白间隙问题。
为什么display: inline元素的width和height被浏览器直接忽略
这不是 bug，是 CSS 规范强制行为：span、a、strong 这类纯内联元素不生成独立盒模型，只参与「行框（line box）」布局。你在开发者工具里看到 width 和 height 被划掉或标灰，说明浏览器压根没把它纳入布局计算。
它的“高度”实际由 font-size + line-height 共同决定；“宽度”完全由内容字符数、字体宽度撑开。哪怕加了 padding-top，背景色能渲染出来，但不会推挤邻近元素，上下 margin 更是完全无效。
用display: inline-block让width/height生效，但必须处理两个副作用
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子项属性控制尺寸
width: 50% 或 height: 50% 为 0 的真实原因
百分比值依赖「包含块（containing block）」，不是简单看父元素有没有设 width 或 height：
-
width: 50%通常没问题，因为块级元素的包含块通常是父元素宽度 -
height: 50%经常算出 0px——因为父容器高度若为auto（由内容撑开），子元素的 50% 就等于 0 - 包含块不一定是父元素，而是最近的「定位祖先」（
position: relative/absolute/fixed）；如果没找到，就回退到初始包含块（viewport） - 快速验证：给父容器加
height: 100vh或height: 400px，看子元素高度是否立刻出现
box-sizing 不影响width是否生效，但彻底改变你对尺寸的预期
box-sizing 不会让 width “突然生效”，但它决定这个值到底管哪一段：
-
box-sizing: content-box（默认）：width只算内容区，总宽 =width+padding-left+padding-right+border-left+border-right -
box-sizing: border-box：width包含padding和border，更符合直觉，推荐全局设置* { box-sizing: border-box; } - 如果你发现“明明设了
200px，结果占了220px”，大概率是content-box+padding: 10px导致的
真正容易被忽略的是：改完 display 后，vertical-align 和 HTML 空白间隙这两个点，90% 的“设了宽高却没效果”其实卡在这儿，而不是 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
