元素宽高不生效主因是默认为inline类型（如span、a），其width/height无效；可通过display: block、inline-block或flex启用，并排查父容器高度、内容为空、CSS覆盖及z-index等问题。
元素设置了宽高却不显示，大概率是因为它默认是 inline 元素（比如 span、a、em 等），而 inline 元素的 width 和 height 是无效的。
确认元素的默认 display 类型
浏览器对不同标签有默认的 display 值：
– div、p、section 默认是 block，支持宽高；
– span、a、strong 默认是 inline，忽略宽高；
– img、input 默认是 inline-block，支持宽高但有行内布局特性。
用 display: block 强制启用宽高
适合需要独占一行、且只需基础盒模型控制的场景：
- 给
span加display: block;后，它就能正常响应width和height； - 注意：变成 block 后会换行，可能影响原有布局，需检查是否需要配合
float或inline-block调整； - 如果只是想让宽高生效，又不想破坏行内流，可改用
display: inline-block;。
用 display: flex 提供更灵活的尺寸与布局控制
适合需要精确控制子元素排列、对齐或自适应尺寸的情况：
-
display: flex;会让容器成为弹性容器，其直接子元素自动成为 flex 项，宽高完全生效； - 即使父容器原本是 inline 元素（如
span），只要设了display: flex，它就转为块级弹性容器； - 常用搭配：
flex-direction控制方向，justify-content/align-items控制对齐，flex-wrap控制换行。
其他常见干扰因素也别忽略
即使改了 display，仍不显示？再快速排查这几项：
立即学习“前端免费学习笔记（深入）”；
- 父容器高度为 0 或 overflow: hidden：子元素再大也看不见；
- 元素内容为空 + 没设置 min-height / background / border：视觉上“消失”，其实盒子存在；
-
被其他 CSS 覆盖：比如
display: none、visibility: hidden、opacity: 0； - z-index 层级太低被遮挡：尤其在定位元素中容易发生。
基本上就这些。display 切换是解决宽高失效最直接的一步，但得结合上下文一起看——不复杂，但容易忽略。
