span设height无效因其为行内元素，css规范规定其不响应height/width；解决需改display为inline-block或block，或换用div等块级元素。
为什么 span 设了 height 却没反应
因为 span 是行内元素，默认不响应 height 和 width。浏览器会忽略这些声明，只按内容撑开高度（即行高 line-height 决定视觉高度）。这不是 bug，是 CSS 规范明确规定的渲染行为。
常见错误现象：span 里放图标或文字，想用 height: 40px 统一控制尺寸，结果完全没变化；开发者反复检查拼写、优先级、父容器 overflow，最后发现卡在了元素类型上。
- 解决方法只有两个：改显示类型（如
display: inline-block或display: block），或换用天生支持尺寸的元素（如div） -
inline-block最常用——保留行内流特性（不换行、可设宽高），但注意它会保留 HTML 空格/换行产生的间隙 - 如果只是想垂直居中文字，优先调
line-height，比硬设height更可靠
display: flex 容器里子元素的 height 为啥有时失效
Flex 项（flex item）的 height 是否生效，取决于父容器的 align-items 和自身的 align-self。当父容器设了 align-items: stretch（默认值），且子元素没设 align-self，那么子元素会被拉伸填满交叉轴（通常是高度方向），此时你写的 height 可能被覆盖。
使用场景：导航栏里多个 div 并排，希望每个高度固定为 60px，但实际被拉高到和 tallest sibling 一样。
立即学习“前端免费学习笔记（深入）”；
- 加
align-self: flex-start可让单个子元素脱离拉伸，尊重自己的height - 或者直接在父容器上设
align-items: flex-start，一劳永逸 - 注意：如果子元素是
img或带min-height的元素，还要检查min-height是否干扰了设定值
块级元素设了 height 还是塌陷？检查这三个地方
块级元素（如 div）理论上该老老实实按 height 渲染，但实际常因内部内容或父级约束“看起来没生效”。核心不是盒模型错，而是高度被其他规则劫持了。
常见错误现象：写了 height: 200px，元素却只有 20px 高；审查元素发现 computed height 是 200，但 visual height 不对。
- 父容器有
overflow: hidden且子元素触发 BFC（比如浮动、绝对定位），导致子元素脱离文档流，高度计算异常 - 子元素用了
position: absolute，它会脱离普通流，不再参与父容器高度计算——此时父容器高度可能坍缩为 0，不是子元素的height失效，而是父容器“看不见”它 - 子元素内部有
margin-top/margin-bottom，发生外边距合并（margin collapse），让顶部/底部留白消失，误以为高度不够
用 box-sizing 控制盒模型边界时最易忽略的一点
box-sizing: border-box 让 width / height 包含 padding 和 border，这是对的；但很多人忘了：它**不包含 margin**，而 margin 依然会向外撑开空间。所以当你设了 height: 100px + padding: 10px + border: 2px + margin: 20px，元素总占用高度其实是 100px + 40px（上下 margin），不是 100px。
性能影响不大，但兼容性上要注意：IE8+ 支持 box-sizing，但早期安卓 WebView 对 box-sizing: inherit 支持不稳定，慎用继承写法。
容易被忽略的地方：很多组件库用 box-sizing: border-box 全局重置，但开发者仍习惯在写新样式时手动加 margin，结果布局错位——不是盒子算错了，是你多算了 margin 的位置。
