width和height对默认行内元素（如<span>、、）无效是CSS规范定义的行为，因其参与行框布局、不生成独立盒模型，尺寸由内容、font-size和line-height决定，width/height被完全忽略；替换元素（如<img>、<input>）例外；改display为inline-block或block可生效，但需处理vertical-align和HTML空格间隙等问题。
直接说结论：width 和 height 对默认的行内元素（如 <span>、<a>、<strong>）无效，是 CSS 规范定义的行为，不是写错了、没刷新或浏览器 bug。
为什么 width/height 被划掉或不生效
行内元素参与的是「行框（line box）」布局，不生成独立盒模型。它的尺寸由内容、font-size 和 line-height 共同决定；width 和 height 在计算时被完全忽略——你在开发者工具里看到它们被划掉，是因为它们压根不进入布局计算流程。
-
padding-top/padding-bottom可以设，但只影响背景和文字上下留白，不会撑开行高，也不推开相邻元素 -
margin-top/margin-bottom完全无效，对布局零影响 -
margin-left/margin-right有效，能控制水平间距 - 替换元素（如
<img>、<input>）例外：它们是行内元素，但可以设width/height
display: inline-block 是最常用解法，但副作用必须处理
它让 width/height 生效，同时保留“可同行排列”的特性，但有两个常见坑：
- 默认
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% 为 0？检查包含块是否有宽度
百分比值依赖“包含块（containing block）”，不是简单看父元素：
立即学习“前端免费学习笔记（深入）”；
-
width: 50%通常没问题，因为块级元素的包含块一般是父元素宽度 -
height: 50%经常算出0px，因为父容器高度若为auto（由内容撑开），子元素的 50% 就等于 0 - 常见陷阱：父容器是
position: absolute且没有定位祖先（relative/absolute/fixed），导致包含块变成初始包含块（initial containing block），而它在无html高度设定时宽高可能为 0 - 快速验证：给父容器加
height: 100vh或height: 400px，看子元素高度是否立刻出现
box-sizing 不影响生效与否，但彻底改变你对尺寸的理解
box-sizing 不会让 width “突然生效”，但它决定这个值到底管哪一段：
-
box-sizing: content-box（默认）：width只算内容区，总宽 =width+padding-left+padding-right+border-left+border-right -
box-sizing: border-box：width包含内容区 + 内边距 + 边框，更符合直觉，但需注意：如果 padding 很大，内容区会被压缩
真正容易被忽略的，是“包含块”和“行框”的区别——前者决定百分比怎么算，后者决定行内元素根本有没有 width 这个概念。这两个机制不在同一层，混着调很容易卡住半天。
