CSS中宽高无效最常见原因是display类型不支持：inline、table-cell、table-row等不支持width/height；修复需改display为block/inline-block/flex/grid，或调整flex属性及检查overflow、box-sizing等干扰因素。
CSS中设置宽高无效，最常见的原因是元素的 display 类型不支持宽高定义。不是所有 display 值都允许 width/height 生效。
哪些 display 值不支持宽高？
以下 display 类型默认忽略 width 和 height（除非显式改变 box-sizing 或配合其他属性）：
- inline 元素（如 span、a、strong）：宽高由内容决定，设置无效
- table-cell、table-row 等表格相关 display：受表格布局规则约束，直接设宽高常被忽略
-
flex 容器的直接子项若未设置
flex-shrink: 0或flex-basis，也可能“无视” height
怎么快速确认和修复？
打开浏览器开发者工具，选中元素，查看 Computed 面板里的 display 实际值，并观察 width/height 是否被划掉（表示被覆盖或不生效）。
- 如果是
display: inline→ 改为inline-block、block或flex - 如果是表格布局 → 改用
display: table+ 自定义容器，或改用 flex/grid - 在 Flex 布局中子项高度不生效 → 检查是否设置了
align-items: stretch（默认），可加align-self: flex-start或明确设height并配flex-shrink: 0
容易被忽略的干扰因素
即使 display 正确，以下情况也会导致宽高“看似无效”：
立即学习“前端免费学习笔记（深入）”；
- 父容器
overflow: hidden且子元素溢出被裁剪，误以为没设高 - 元素有
min-height/max-height覆盖了 height - CSS 优先级问题：其他规则（如 reset.css 或框架样式）重写了你的 width/height
- 使用了
box-sizing: border-box但 padding/border 较大，视觉上“撑不开”
一个快速验证技巧
临时加一行调试样式：
outline: 2px solid red;
它不受 box-sizing 影响，能真实反映元素渲染后的尺寸范围，帮你判断是“没生效”还是“被遮挡/压缩”。
